导航栏滚动功能不起作用答案

【问题标题】：Nav Bar Scroll Function NOT Working导航栏滚动功能不起作用
【发布时间】：2018-03-31 07:06:20
【问题描述】：

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

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

Google Chrome Dev-Files

【问题讨论】：

你有没有得到任何错误？检查浏览器控制台并分享您的错误
嗯，我记得在我试图弄清楚之前遇到了一个语法错误，但现在它没有给出任何错误。只是，不工作有没有办法可以使用谷歌浏览器的开发工具检查它是否正在读取 script.js 文件？
所有类型的 js 错误都会在控制台中说明。您可以使用CRTL U 来检查文件是否已添加以及代码是否即将到来
我说检查控制台部分的错误不是来源
控制台没有错误。

标签： javascript jquery

【解决方案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>

非常感谢！

【讨论】：

【解决方案2】：

不确定最外面的$(function() {... 做了什么，但我认为这就是里面的sn-p 没有运行的原因。

//$(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>

如果你打算使用IIFE，立即调用函数表达式，你可以这样做

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

这也有效。

【讨论】：

【解决方案3】：

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

代码笔Links

let navRef = document.querySelector('nav');

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

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

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

【讨论】：