[英]How to add active class on scroll in jQuery?
Here's a demo in Plunker. 这是Plunker的一个演示。
I have a few div
elements with data-msid
('1', '2', '3'), and each one has a corresponding li
in footer with data-msidatrr
('1', '2', '3'). 我有一些带有
data-msid
('1','2','3')的div
元素, data-msid
元素都有一个对应的li
in footer with data-msidatrr
('1','2','3') 。
PROBLEM: 问题:
I want to add active class on footer li
when the user scrolls and the corresponding div
becomes visible in viewport
. 我希望在用户滚动时在
footer li
上添加活动类,并在viewport
显示相应的div
。
EXAMPLE: 例:
When id='first' data-msid="1"
appears in the viewport, li data-msidatrr="1"
in footer should have an active
class, and so on for the rest of the div
and footer li
. 当
id='first' data-msid="1"
出现在视口中时,页脚中的li data-msidatrr="1"
应该有一个active
类,对于div
和footer li
的其余部分依此类推。
Here's my jQuery code: 这是我的jQuery代码:
$(function(){
$.fn.isOnScreen = function(){
var win = $(window);
var viewport = {
top : win.scrollTop(),
left : win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();
return ( ! (
viewport.right < bounds.left ||
viewport.left > bounds.right ||
viewport.bottom < bounds.top ||
viewport.top > bounds.bottom
));
}; /* END $.fn.isOnScreen */
$( "#container" ).scroll(function() {
console.log('scrlling');
$.each( $('#container>div'), function(i, left) {
console.log(i);
var msid = $(left).attr('data-msid');
console.log($(left).attr('data-msid'));
console.log($('#first').isOnScreen());
$('.fC[data-msidatrr=]+msid').addClass('active');
})
});
}) /* END $(function() */
First, you have some errors in your HTML and jQuery: 首先,你的HTML和jQuery中有一些错误:
<!-- wrong div id -->
<div id='second' data-msid="12">
<!-- correct div id -->
<div id='second' data-msid="2">
<!-- wrong -->
<li class='item data-msidatrr="3"'>third</li>
<!-- correct -->
<li class='item' data-msidatrr="3">third</li>
// wrong
$('.fC[data-msidatrr=]+msid').addClass('active');
// correct
$(".fC li[data-msidatrr='" + msid + "']").addClass('active');
Second, consider using this neat function to detect if a div is visible in your #container
on scroll: (credits to reference) 其次,考虑使用这个简洁的函数来检测在滚动的
#container
是否可以看到div :( 引用的信用)
function isScrolledToView(el) {
var container = document.getElementById('container').getBoundingClientRect();
var div = el.getBoundingClientRect();
console.log('container.top = '+container.top+'; container.bottom = '+container.bottom)
return ((div.top >= container.top) && (div.top <= container.bottom));
}
The code above will simplify your code, since you won't be needing $.fn.isOnScreen
anymore. 上面的代码将简化您的代码,因为您将不再需要
$.fn.isOnScreen
。
BONUS (optional): 奖金(可选):
id="container"
NOT id='container'
id="container"
NOT id='container'
third
and fourth
div, they will be "active" at the same time because of their short height, so you might want to do something with it. third
和fourth
div的情况下,由于它们的高度很短,它们将同时“活跃”,所以你可能想要用它做一些事情。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.