使用jquery滚动页面时添加引导程序类

Question

我对jQuery有问题。

我想在滚动页面时添加fixed-top类(Bootstrap 4(，但事实并非如此。

jQuery(document).ready(function($){
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".robig").addClass("fixed-top");
} else {
$(".robig").removeClass("fixed-top");
}
});

你能看出我做错了什么吗？

Answer 1

您的scroll变量永远不会更新。您需要将代码添加到scroll事件中，如下所示：

jQuery(document).ready(function($) {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 130) {
$(".robig").addClass("fixed-top");
} else {
$(".robig").removeClass("fixed-top");
}  
});
});

body {
margin: 0; 
}
.foo {
height: 140vh;
background: black;
}
.robig {
width: 100%;
height: 10vh;
background: lime;
}
.fixed-top {
position: fixed;
top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="foo"></div>
<div class="robig"></div>
<div class="foo"></div>

然而，如果你试图重现粘贴效果，我建议你使用position: sticky，因为这不需要jquery：

body {
margin: 0;
}
.foo {
height: 140vh;
background: black;
}
.robig {
width: 100%;
height: 10vh;
background: lime;
position: sticky;
top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="foo"></div>
<div class="robig">Stop at top</div>
<div class="foo"></div>

Answer 2

您的代码仅在页面加载时运行，但您需要在窗口的scroll事件中运行代码

$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll >= 500) 
$(".robig").addClass("fixed-top");
else 
$(".robig").removeClass("fixed-top");
});

此外，您还可以简化代码并使用.toggleClass()代替

$(window).scroll(function(){
$(".robig").toggleClass("fixed-top", $(window).scrollTop() >= 500);
});

$(window).scroll(function(){
$(".robig").toggleClass("fixed-top", $(window).scrollTop() >= 500);
});

p {height: 500px}
.robig {
width: 100%;
background: red;
}
.fixed-top {
position: fixed;
top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>content</p>
<div class="robig">robig</div>
<p>content</p>
<p>content</p>

Answer 3

$(document).ready(function(){       
var scroll = 0;
$(document).scroll(function() { 
scroll = $(this).scrollTop();
if(scroll > 500) {
$(".robig").addClass("fixed-top");
} else {
$(".robig").removeClass("fixed-top");
}
});
});

Answer 4

您需要窗口滚动事件。你可以试试下面的代码

$(document).ready(function(){
$(window).scroll(function(){    
if ($(this).scrollTop() >= 130)
{
$(".robig").addClass("fixed-top");
} 
else 
{
$(".robig").removeClass("fixed-top");
}  
});
});