Question

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

我使用了此问题的代码：Changing nav-bar color after scrolling?

我的代码现在看起来像这样：

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

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

由于

Answer 1

向下滚动时最好添加新类，向上滚动时删除该类。并在新课程上添加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;
   }

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

在else部分中，您不需要花括号

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

滚动后更改导航栏背景颜色

3 个答案: