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

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

我使用了这个问题的代码：

我的代码现在如下所示：

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

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

---

谢谢

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

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

CSS:

---

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

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

CSS:

---

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

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

---

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

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

试试这个

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

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）；
如果（滚动>54）{
$（“.navbar固定顶”）.css（“背景”、“蓝色”）；
}
否则{
$（“.navbar固定顶”）.css（“背景”、“白色”）；
}
})
})

试试这个

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

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）；
如果（滚动>54）{
$（“.navbar固定顶”）.css（“背景”、“蓝色”）；
}
否则{
$（“.navbar固定顶”）.css（“背景”、“白色”）；
}
})
})

正如他们所说，不仅要寻找正确的答案，还要找出你做错了什么，并从中吸取教训。在我的回答中看到你的错误。如果你想改变背景，我不同意添加一个类。我认为当你想添加一个类时，需要添加一个类。JQuery为内联样式提供css函数并不是偶然的。避免我们使用助手类，除非它是我们想要的。如果你想在100-200之间改变。。。还是更多颜色？100-200节课可能会有点贵：DD所以这里的“更好”这个词有点危险。它可以解决用户的问题，但我觉得这不是问题的正确答案，更不用说“更好”。正如他们所说，不要只是寻找正确的答案，还要找出你做错了什么，并从中吸取教训。在我的回答中看到你的错误。如果你想改变背景，我不同意添加一个类。我认为当你想添加一个类时，需要添加一个类。JQuery为内联样式提供css函数并不是偶然的。避免我们使用助手类，除非它是我们想要的。如果你想在100-200之间改变。。。还是更多颜色？100-200节课可能会有点贵：DD所以这里的“更好”这个词有点危险。它可以解决用户场景，但我觉得这不是问题的正确答案，更不用说“更好”。可能重复的可能重复的