在我的页面顶部有一个javascript幻灯片。当幻灯片切换到下一个图像时,我调用另一个函数来更改页面的背景颜色。
当幻灯片不再在视图中时,即当用户向下滚动页面时,客户端希望背景颜色停止改变。
有没有办法检测元素是否由于滚动而不再可见?
发布于 2011-06-08 05:50:28
您可以使用jQuery $.scrollTop
函数,可能是从scroll
事件处理程序来编写脚本。
发布于 2011-06-08 05:49:25
jQuery中的测试代码
function test() {
var $elem = $('.test');
var visibleAtTop = $elem.offset().top + $elem.height() >= $(window).scrollTop();
var visibleAtBottom = $elem.offset().top <= $(window).scrollTop() + $(window).height();
if (visibleAtTop && visibleAtBottom) {
alert('visible');
} else {
alert('invisible (at ' + (visibleAtTop ? 'bottom' : 'top') + ')');
}
}
http://jsfiddle.net/9PaQc/1/的完整工作示例(更新:http://jsfiddle.net/9PaQc/2/ )
附注:此选项仅检查垂直滚动。对于水平方向,只需将top
替换为left
、Y
-> X
和height()
-> width()
即可
编辑
通过更改window.scrollY
-> $(window).scrollTop()
实现了完全jQuery (以确保x-browser兼容性)
发布于 2011-06-08 05:38:31
使用window.pageYOffset确定窗口中的滚动量。使用对象的当前偏移检查对象是否在视图中。请注意,这些值主要取决于浏览器,因此首先检查它是否存在,然后对其执行操作。
https://stackoverflow.com/questions/6274577
复制相似问题