javascript - 导航栏滚动功能不起作用

Question

当我向下滚动一定量时更改导航栏的颜色，并在向上滚动时重置。我尝试过许多不同的技术。又名有关该主题的 YouTube 视频。但似乎无法让它发挥作用!我的 CSS 样式表中有一个带有背景颜色集的“滚动”类。但它甚至不会承担我的职能。

$(function(){
    $(window).scroll(function() {
        if($(window).scrollTop() >= 100) {
            $('.nav').addClass('scrolled');
        }else {
            $('.nav').removeClass('scrolled');
        }
    });
});

Google Chrome Dev-Files

Answer 1

//$(function(){
    $(window).scroll(function() {
        if($(window).scrollTop() >= 100) {
            $('.nav').addClass('scrolled');
        }else {
            $('.nav').removeClass('scrolled');
        }
    });
//});

.nav {
  max-width: 500px;
  height: 1000px;
}

.nav.scrolled {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
</div>

非常感谢!