标题滚动事件答案

【问题标题】：Header scroll event标题滚动事件
【发布时间】：2021-04-17 19:51:27
【问题描述】：

我有这样的代码，我希望在滚动期间将一个类添加到我的标题中，但是在函数 jQuery(window).scroll(function() { 之后没有任何作用

这是我的html

<header class="site-header">
   
  <div class="container">
    <div>
      <nav class="nav-header"></nav>
    </div>
  </div>
</header>

这是我的 jQuery

jQuery(function() {
var header = jQuery(".site-header");
console.log("work");
jQuery(window).scroll(function() {    
    console.log("not work");

    var scroll = jQuery(window).scrollTop();

    if (scroll >= 500) {
        header.removeClass('site-header').addClass("FireBrickRed ");
        header.addClass("transition");
    } else {
        header.removeClass("FireBrickRed ").addClass('GreyHeader');
        header.addClass("transition");
    }
});
});

没有添加类...在浏览器中，即使滚动后，控制台日志功能也没有输出任何内容

解决方案

我删除了窗口并添加了一个主体，它起作用了。

【问题讨论】：

感谢您提供代码，但您能解释一下您面临并试图解决的问题吗？
类没有被添加......在浏览器中，即使滚动后，控制台日志功能也没有输出任何东西
window 是您正在滚动的实际容器吗？
@ChloeAnderson 我只希望当我在页面顶部时，标题没有类，当我从页面顶部开始滚动时，添加类
@ChloeAnderson 我删除了窗口并添加了一个主体，它起作用了。谢谢

标签： javascript jquery

【解决方案1】：

尝试添加一些内容以便滚动:)

jQuery(function() {
var header = jQuery(".site-header");
console.log("work");
jQuery(window).scroll(function() {    
    console.log("not work");

    var scroll = jQuery(window).scrollTop();

    if (scroll >= 500) {
        header.removeClass('site-header').addClass("FireBrickRed ");
        header.addClass("transition");
    } else {
        header.removeClass("FireBrickRed ").addClass('GreyHeader');
        header.addClass("transition");
    }
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="site-header">
   
  <div class="container">
    <div>
      <nav class="nav-header">
        header
      </nav>
    </div>
  </div>
</header>

<main>
  <p>More content</p>
  <p>More content</p>
  <p>More content</p>
  <p>More content</p>
  <p>More content</p>
  <p>More content</p>
  <p>More content</p>
  <p>More content</p>
  <p>More content</p>
  <p>More content</p>
  <p>More content</p>
  <p>More content</p>
  <p>More content</p>
  <p>More content</p>
  <p>More content</p>
  <p>More content</p>
</main>

【讨论】：