我有一个这样的代码,我想在滚动期间将一个类添加到我的头上,但是在函数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");
}
});
});
类没有被添加...在浏览器中,即使在滚动之后,控制台日志函数也没有输出任何内容
解决方案
我把窗户拆了,加了一个尸体,它起作用了。
尝试添加一些内容以便滚动:)
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>