标题滚动事件

Question

我有一个这样的代码，我想在滚动期间将一个类添加到我的头上，但是在函数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");
    }
});
});

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

解决方案

我把窗户拆了，加了一个尸体，它起作用了。

Answer 1

尝试添加一些内容以便滚动：）

null

js lang-js prettyprint-override">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>