javascript - 由于某种原因，scrollTop 没有改变 css 属性

Question

我正在尝试编写 JS 代码来将导航栏背景更改为滚动时透明，但由于某种原因它不起作用，我已经尝试过控制台日志并且它正在工作，所以你能帮我找出问题所在吗？

<script type="text/javascript">
$(document).scroll(function(){
    if($(this).scrollTop() > 1)
    {   
        $(".navbar-fixed-top").css("background-color", "white !important");
        console.log("Done");
    } else if ($(this).scrollTop() <= 1) {
        $(".navbar-fixed-top").css("background-color", "transparent !important");
        console.log("Back");
    }
});
</script>

Answer 1

您的代码是正确的，但您无法通过这种方式将 CSS 属性定义为 !important 所以只需将其删除

$(".navbar-fixed-top").css('background-color', 'white');`

或者使用

$(".navbar-fixed-top").style('background-color', 'white', 'important');`

查看此帖子How to apply !important using .css()?

注意:顺便尝试将 $(".navbar-fixed-top") 保存在某处以提高性能并避免每次滚动时都获取它窗口