提问者:小点点

标题滚动事件


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

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

解决方案

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


共1个答案

匿名用户

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

null

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>