Change navbar background color after scrolling

Question

My navbar has a transparent background, and I wanted to add a different bg when a user scrolls down.

I used the code from this question: Changing nav-bar color after scrolling?

my code now looks like this:

$(document).ready(function(){
var scroll_start = 0;
var startchange = $('#startchange');
var offset = startchange.offset();
if (startchange.length){
    $(document).scroll(function() {
        scroll_start = $(this).scrollTop();
        if(scroll_start > offset.top) {
            $(".navbar-fixed-top").css({'background-color':'#24363d',
                                        'opacity': '0.3'});
        } else {
            $('.navbar-fixed-top').css({'background-color':'transparent'});
        }
    });
}
});

When I scroll down, everything works ok, the bg and the opacity applies, but when I scroll back to the top this style is still there. I want it to change back to the default styling with no background.

Thanks

Possible duplicate of [Changing nav-bar color after scrolling?](http://stackoverflow.com/questions/23706003/changing-nav-bar-color-after-scrolling) — Sam, Apr 14 '17 at 20:24

score 3 · Answer 1 · answered May 17 '17 at 09:28

try this one

          <script>
$(document).ready(function(){
  $(window).scroll(function(){
    var scroll = $(window).scrollTop();
      if (scroll > 54) {
        $(".navbar-fixed-top").css("background" , "blue");
      }

      else{
          $(".navbar-fixed-top").css("background" , "white");   
      }
  })
})
      </script>

score 2 · Accepted Answer · answered Dec 15 '16 at 10:40

2

It is better to add a new class when scroll down and remove that class when scroll up back. And add css on that new class.

    if(scroll_start > offset.top) {
        $(".navbar-fixed-top").addClass("fixednav");
    } else {
        $('.navbar-fixed-top').removeClass("fixednav");
    }

CSS:

  .navbar-fixed-top.fixednav{
        background:#24363d;
        opacity:0.3;
   }

answered Dec 15 '16 at 10:40

Taniya

550
2
7

As they say, don't just look for the right answer, but also find what wrong you did and learn from it. See your mistake in my answer. – Shobhit Srivastava Dec 15 '16 at 10:54
I disagree with add a class if what you want is to change the background. I think add a class is needed when you want to add a class. It is not casuality that JQuery provide css function for inline styles. Avoid us to use helper classes unless it is what we want. What if you want to change between 100-200... or more colors? 100-200 classes could be a little expensive :DD So the words 'it is better' here are a little dangerous. It could solve the user scenario but I don't feel it is the right answer for the question and much less 'better'. – Sam Apr 14 '17 at 15:15

score 1 · Answer 3 · answered Dec 15 '16 at 10:56

In the else part, you don't need the curly braces

$(document).ready(function(){
var scroll_start = 0;
var startchange = $('#startchange');
var offset = startchange.offset();
if (startchange.length){
    $(document).scroll(function() {
        scroll_start = $(this).scrollTop();
        if(scroll_start > offset.top) {
            $(".navbar-fixed-top").css({'background-color':'#24363d',
                                        'opacity': '0.3'});
        } else {
            $('.navbar-fixed-top').css('background-color':'transparent');
        }
    });
}
});

Change navbar background color after scrolling

3 Answers3