Question

当我向下滚动 一定量时，我需要做些什么来改变导航栏的颜色，当我向上滚动时我需要重置。我尝试了很多不同的技术。关于这个主题的AKA youtube视频。但似乎无法让它工作！我的CSS样式表中有一个'滚动'类，背景颜色设置。但它甚至不会占用我的功能。

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

Google Chrome Dev-Files

Answer 1

＆＃13;

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

＆＃13;

.nav {
  max-width: 500px;
  height: 1000px;
}

.nav.scrolled {
  background-color: red;
}

＆＃13;

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

＆＃13;

＆＃13; 非常感谢！

Answer 2

不确定最外面的$(function() {...是做什么的，但我认为这就是内部代码段无法运行的原因。

＆＃13;

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

＆＃13;

.nav {
  max-width: 500px;
  height: 1000px;
}

.nav.scrolled {
  background-color: red;
}

＆＃13;

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

＆＃13;

如果您打算使用IIFE，请立即调用函数表达式，您可以

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

也可以。

Answer 3

这描述了如何在 Vanilla JS 中实现此功能，同时使用被动事件监听器来处理性能。

Codepen Links

＆＃13;

let navRef = document.querySelector('nav');

document.addEventListener('scroll', () => {
  if (window.scrollY > 500) {
    navRef.classList.add('scrolled');
  } else {
    navRef.classList.remove('scrolled');
  }
}, { passive: true })

＆＃13;

body {
  margin: 0;  
}

div.container {
  background: aliceblue;
  height: 10000px;
}

nav {
  height: 50px;
  background: pink;
  position: fixed;
  width: 100vw;
  transition: background 0.3s ease-in-out;
}

nav.scrolled {
  background: #80deea;
}

＆＃13;

<div class="container">
  <nav></nav> 
</div>

＆＃13;

导航栏滚动功能不起作用

3 个答案: