Jquery inview元素应该在加载和滚动时工作
Jquery inview element should work on load and on scroll
我试图通过向元素添加类并在不inview时删除它来使此inview函数工作。不知道我错过了什么……请帮忙好吗?
http://jsfiddle.net/zefjh/$.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');
}
else{
$(this).removeClass('inview');
}
});
还有:你的点击功能应该检查点击的元素是否在屏幕上使用this
$('.box').click(function(){
alert($(this).isOnScreen());
});
最后:您可以将== true
部分留在if语句中。
完整示例:http://jsfiddle.net/zefjh/2/
我修改了你的函数,请检查一下
fiddle http://jsfiddle.net/kka284556/zefjh/4/
设置为滚动
相关文章:
- jQuery滚动功能只工作一次
- 可以'无法使滚动条正常工作
- 如何隐藏滚动条,但希望它继续工作
- "此网站似乎使用滚动链接定位效果.这可能不能很好地与异步平移一起工作;
- 更新Wordpress和我的平滑滚动停止工作
- 滚动功能不工作
- 如何停止两个按钮执行相同的工作?在这种情况下,它们都会滚动到顶部
- 单击水平滚动库中的图像以居中显示无法工作的功能
- 如何在HTML / CSS中填充垂直和滚动中间窗格(Chrome可以工作,但不能Firefox)
- 自动滚动工作方式不同
- jquery滚动功能无法正常工作
- 绑定'滚动'不会'我在IE 11中不工作
- Jquery焦点不工作/滚动
- 滚动功能不工作
- 锚定标签功能强大,但滚动流畅赢得't工作;页面的行为就像javascript是'没有
- 滚动框滚动工作,但它在开始时返回
- 无法获得Jquery平滑滚动工作
- Video.js播放器不与Jquery无限滚动工作
- 我的JQuery向下滚动工作,但向上滚动不工作
- 让tumblr喜欢按钮与无限滚动工作