我正在尝试测试<div>
是否已滚出视图。
这是我到目前为止所拥有的,
$(window).on('scroll',function(){
var divBottom = $('#home').offset().bottom;
var windowTop = $(window).scrollTop();
var windowBottom = windowTop + $(window).height();
if (divBottom >= windowTop) {
console.log("yes");
} else {
console.log("no");
}
});
无论我在哪里滚动,都不记录任何内容。
我试图测试的是div的底部是否超过了窗口的顶部。
答案 0 :(得分:4)
divBottom
是undefined
。您可以使用元素的top
偏移量,然后通过将其高度添加到顶部来计算它的最低值,就像在此fiddle中一样。
$(window).on('scroll',function(){
var $home = $('#home');
var divBottom = $home.offset().top + $home.height();
var windowTop = $(window).scrollTop();
console.log(divBottom, windowTop);
if (divBottom >= windowTop) {
console.log("yes");
} else {
console.log("no");
}
});
答案 1 :(得分:4)
这里有一个非常有用的Vanilla JS函数可以提供帮助。
var divposition = document.getElementById('home').getBoundingClientRect();
if( divposition.left+divposition.width < 0) {
// element is off to the left of the view
}
if( divposition.top+divposition.height < 0) {
// element is off the top of the view
}
if( divposition.top > window.innerHeight) {
// element is off the bottom of the view
}
if( divposition.left > window.innerWidth) {
// element is off to the right of the view
}
希望这有帮助!
答案 2 :(得分:0)
试试这个。
var myTop = $('#home').offset().top; // the top y location of your element
var windowTop = $(window).scrollTop(); // the top of the window
var windowBottom = windowTop + $(window).height(); // the bottom of the window
然后
if (myTop > windowTop && myTop < windowBottom) {
答案 3 :(得分:0)
尝试:
$(window).scroll(function(){
//your code
});