页面加载时透明Navbar未生效的问题解决

Got it, let's get this sorted for you! The core issue here is that Bootstrap's navbar-default class has a built-in default background color, which is why your navbar shows up gray when the page first loads—even though your scroll logic would set it to transparent once you scroll back up.

Here's the step-by-step fix to make the navbar transparent immediately on page load, with the scroll behavior intact:

1. Update Your CSS to Set Initial Transparent State #

First, override Bootstrap's default background for navbar-default so it starts transparent right away. Add the background: transparent line to your existing .navbar-default rule:

.container-fluid { 
  height: 60px; 
} 

.navbar-default { 
  border: none; 
  background: transparent; /* This forces initial transparency */
} 

.navbar-default .navbar-brand { 
  font-family: 'Lobster', cursive; 
  font-size: 30px; 
  color: #ffffff; 
} 

.navbar-default .navbar-nav>li>a { 
  float: left; 
  font-size: 20px; 
  color: #ffffff; 
  padding-top: 20px; 
} 

.jumbotron { 
  background: url("img/sunset.jpg") center center no-repeat; 
  font-family: 'Lobster', cursive; 
  color: #ffffff; 
  background-size: cover; 
  height: 100vh; 
  padding: 0; 
}

2. Tweak the JavaScript (Optional but Cleaner) #

Your existing scroll logic works, but using CSS classes instead of directly modifying inline styles is more maintainable. Here's an optimized version:

First, add these two helper classes to your CSS:

/* Helper classes for navbar states */
.navbar-solid {
  background: #443e41 !important;
}

.navbar-transparent {
  background: transparent !important;
}

Then update your JavaScript to use these classes (and ensure the initial state is set):

// Set initial transparent state when the page loads
$(".navbar-default").addClass("navbar-transparent");

// Handle scroll events to switch states
$(window).scroll(function () {
  if ($(window).scrollTop() > 50) {
    $(".navbar-default").removeClass("navbar-transparent").addClass("navbar-solid");
  } else {
    $(".navbar-default").removeClass("navbar-solid").addClass("navbar-transparent");
  }
});

Quick Note on Your HTML Structure #

I noticed your navbar links are all wrapped inside a single <li> element—this will cause layout issues. Each link should be in its own <li> for proper Bootstrap styling:

<ul class="nav navbar-nav navbar-right">
  <li><a href="#">About Me</a></li>
  <li><a href="#">My Life Before Code</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
</ul>

With these changes, your navbar will be transparent as soon as the page loads, switch to the solid gray background when you scroll down more than 50px, and switch back to transparent when you scroll back up.

内容的提问来源于stack exchange，提问作者Ashley Edds