jQuery if DOM元素在视口检查总是返回true滚动

我想弄清楚如何检查如果一个DOM元素是可见的在Windows视窗内滚动期间，我一直在使用很多方法和许多插件和我没有任何意义。看起来像当我将视口检查附加到window.scroll它只是不起作用：jQuery if DOM元素在视口检查总是返回true滚动

$(window).scroll(function() { 
    if(checkIfXInViewport) { 
    // this is getting executed ALL THE TIME 
    } else { 
    // this never happens even if X is NOT in viewport } 
}

}）;

下面是使用的示例：http://jsfiddle.net/tuT7U/（使用https://github.com/zeusdeux/isInViewport/）。运行控制台，即使标题不在视口中，它总是返回“可见”....为什么？

我在做什么错？

来源

2014-04-01 Wordpressor

[“如何判断一个DOM元素在当前视口中是否可见？”]（http://stackoverflow.com/questions/123999/how-to-tell-ifa-a- dom-element-is-visible-in-the-current-viewport）特别是[this]（http://stackoverflow.com/a/7557433/2774955） – 13ruce1337

这是我用来检测什么时候至少有50％的元素在视口内然后做一些事情。您可以调整以检测它变为可见的时刻。

// Create jQuery Method 

jQuery.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 elemtHeight = this.height()/2; 
    elemtHeight = Math.round(elemtHeight);r 

    var bounds = this.offset(); 
    bounds.top = bounds.top + elemtHeight; 
    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)); 

} 

//Usage: 
$(window).scroll(function(){ 
    if($('#your-element').isOnScreen()){ 
    // do something 
    } 
    else { 
    // element not in viewport 
    } 
});

来源

2014-09-05 16:17:32

jQuery if DOM元素在视口检查总是返回true滚动

回答

相关问题