滚动后更改导航栏背景色

Question

我的导航栏有一个透明的背景，当用户向下滚动时，我想添加一个不同的背景。

我使用了这个问题的代码：滚动后更改导航条颜色？

我的代码现在如下所示：

$(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'});
        }
    });
}
});

当我向下滚动时，一切正常，背景和不透明度适用，但当我向后滚动到顶部时，这种样式仍然存在。我希望它更改回没有背景的默认样式。

谢啦

Answer 1

在其他部分，你不需要花括号

$(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');
        }
    });
}
});

Answer 2

试试这个吧

          <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>

Answer 3

最好向下滚动时添加一个新类，向上滚动时删除该类。并在新类上添加css。

    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;
   }