jQuery发现当用户滚动出一个元素

jQuery find when user scrolled out an element

本文关键字：一个 元素 发现 用户 滚动 jQuery      更新时间：2023-09-26

我有2个divs:

<div id="div1"></div>
<div id="div2"></div>

我想添加css({'position':'relative'})到div2只有当用户滚动页面和div1不再在页面上可见。当div1再次可见时，我想删除css规则。

有人能帮我吗?

你可以试试下面的代码:

$(window).bind('scroll', function() {
if ($(document).scrollTop() >= $('#div1').offset().top - $(window).height()) {
    //Change css relative
}else{
}
});

你应该一直玩，直到你得到一个完美的结果。祝你好运

这是不完美的，但我已经给你写了一个快速插件来照顾这个:http://jsfiddle.net/m7ztR/1/

有两种用法:

它给你一个新的选择器console.log( $( "#elem" ).is( ":inView" )? "visible":"invisible" );

你也可以用它来获取所有可见的元素，例如:console.log( $( "p:inView" ).get() );

和类似事件侦听器的$("#watchThisElement")。(function(visible)){If (visible){//做这个…}其他{//做……}});

注意:由于一些原因，这是不完整的!!

  1. 它只处理垂直滚动
  2. 它不处理iframe(和可能搞砸可怕嵌套滚动)
  3. 没有解绑定
  4. 如果你观察很多元素，它可能会变慢
  5. 不考虑窗口大小调整

是我从我周围的类似代码中快速破解出来的。

如果jsfiddle链接失效，则实际代码和标记如下:

html: 

<div id="status">look at my background color!</div>
<div id="above">lots of space above ... </div>
<div id="trackMe">i'm being tracked!</div>
<div id="below">lots of space below ... </div>
css: 

#status{
    position: fixed; 
    right: 0; 
    top: 0; 
    background-color: red; 
}
#above, #below{
    height: 800px; 
    background-color: yellow; 
}
javascript: 

/**
 * jquery (in)visibility plugin ... 
 */
(function( $ ){
    var w = $( window ); 
    // add a custom ":inView" selector
    $.expr[':'].inView = function(obj){
        var $this = $(obj);
        var relY = $this.offset().top - w.scrollTop(); 
        return relY >= 0 && relY <= w.height(); 
    }; 
    $.fn.visibilityChange = function( fun ) {  
        return this.each(function() {
            var elem = $(this);
            var pVisible = elem.is( ":inView" ); 
            $( document ).scroll( function( e ){
                if( pVisible != elem.is( ":inView" ) ){
                    pVisible = !pVisible; 
                    fun( pVisible ); 
                }
            });
        });
    };
})( jQuery );

$( "#trackMe" ).visibilityChange( function( visible ){
    $( "#status" ).css( "background-color", visible? "green":"red" ); 
} );

我认为你应该在窗口上做一些技巧。Onscroll，窗口高度和div1的高度。就像在……在onscroll方法中执行一些代码…检查窗口高度，检查div1的高度，做一些计算，检查div是否在视线之外…如果这是真的…删除css

相关文章：