Changing navigation bar's style on scroll

JavaScript
, ,
1

Hi.

I want to make a navigation bar that extends to the full width of the window and changes background color when scrolled to the next section and goes back to its default style when scrolled back up to home.

This is what it looks like now.

600×318 1.04 MB

It still shows the black background when scrolled back to home and looks off. I want it to change immediately to its default style as soon as the user scrolled to home.

I’m having a wee bit of trouble in the jQuery (beginner here), I think in the if-else statement and the style since it’s position: fixed. There must be other ways to achieve this but I don’t have much idea on what those are.

If anyone can give me any clue on how to achieve what I’m trying to do, it would be a huge help. Thank you so much

Here are the codes.

.html

<div class="header-whole">
     <div>
          <img class="header-logo" src="img.png"/>
          <img class="header-logo" id="logo-right" src="img.png"/>
     </div>
     <div class="main-nav">
          <ul class="main-nav-menu">
               <li><a href="#about-us">ABOUT US</a></li>
               <li><a href="#facility">FACILITY</a></li>
               <li><a href="#services">SERVICES</a></li>
               <li><a href="#get-started">GET STARTED</a></li> 
          </ul> 
     </div>
     <div class="spinner-master2">
          <input type="checkbox" id="spinner-form2" />
          <label for="spinner-form2" class="spinner-spin2">
               <div class="spinner2 diagonal part-1"></div>
               <div class="spinner2 horizontal"></div>
               <div class="spinner2 diagonal part-2"></div>
          </label>
     </div>
</div>

.css

.header-logo {
    padding: 0 !important;
}
.header-whole {
    width: 90%;
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    justify-content: space-between;
    max-width: 100% !important;
    padding: 20px;
}
.main-nav{
    display: block;
}
.main-nav ul {
    display: flex;
    text-decoration: none !important;
    margin: 0 !important;
    padding-top: 7px;
}
.main-nav li {
    padding: 0 20px;
    list-style: none;
}
.main-nav a {
    text-decoration: none;
    color: #ffffff;
}
.navbar-color {
    background-color: #000000 !important;
    width: 100% !important;
}

.js

jQuery(function($){
    var $navbar = $('.header-whole');
    $(window).scroll(function(event) {
    var $current = $(this).scrollTop();
         if( $current > 0 ){
              $navbar.addClass('navbar-color');
         } else {
              $navbar.removeClass('navbar-color');
         }
    });
 });
2

Why would you be specifying a width in the .navbar-color definition? Surely the navbar is 100% all the time anyway?

3

Hi, @m_hutley.

The navigation bar was originally styled at 90% width.
Or should I just give it a 100% width and adjust it through margins and paddings?

This is how it should look like in home.

And this is how it should look like in the other sections.

4

Oh i think i understand what you mean now. Your problem isnt with the shifting, its that the bar doesnt drop its style fast enough?

Increase the 0 to some other number that reflects the pixel value at which you want the bar to change.

What you may want to investigate though is what mechanism you’re using to do the fixed-scrolling and trigger off of that instead.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.