我的html页面中有一堆div,它们都是块元素(一个在另一个的顶部,没有浮动),我想要的是每当这些div距窗口顶部达到150px时,它得到一个class .active应用于它。所有这些div都具有相同的类名,但是它们每个都有不同的ID来区分它们。因此,我需要一些可以对每个div进行相同处理的jQuery代码,而不必为每个div编写代码。
这是html:
<div id="steps">
<div class="step" id="step-1"></div>
<div class="step" id="step-2"></div>
<div class="step" id="step-3"></div>
<div class="step" id="step-4"></div>
</div>
我有一个有效的jquery,但它的目标是一个ID,因此我需要使其更具动态性,以便它可以针对每个ID。总共只有4个步骤。
var distance = $('#step-1').offset().top - 150,
$window = $(window);
$window.scroll(function() {
if ( $window.scrollTop() >= distance ) {
$('#step-1').addClass('active');
}
});
谢谢你的帮助!
最佳答案
$(window).on('scroll', function() {
var scrolled = $(this).scrollTop();
$('.step').filter(function() {
return scrolled >= $(this).offset().top-150;
}).addClass('active');
});
关于jquery - 每次从顶部到达150px时,将一个类添加到一组div中,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/18578386/