我试图通过向元素添加一个类并在不查看时将其删除来使此查看功能正常工作。 不知道我错过了什么......请问有什么帮助吗?
$.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));
};
$('.box').click(function () {
alert($('.box').isOnScreen());
});
if ($('.box').isOnScreen() == true) {
$('.box').addClass('inview');
}
$(window).scroll(function () {
if ($('.box').isOnScreen() == true) {
$('.box').addClass('inview');
} else {
$('.box').removeClass('inview');
}
});
最佳答案
您可以使用$.each
检查每个 .box
,无论它是否在屏幕上,都在滚动。
$.each($(".box"), function(){
if ($(this).isOnScreen()) {
$(this).addClass('inview');
}<br/>
else{
$(this).removeClass('inview');
}
});
另外:您的点击函数应该使用this
检查被点击的元素是否在屏幕上。
$('.box').click(function(){
alert($(this).isOnScreen());
});
最后:您可以离开 == true
包含在 if 语句中。
关于javascript - Jquery View 元素应该在加载和滚动时工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24286594/