Javascript jQuery在用户滚动出元素时查找

我有两个

div

：

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

我想将

css（{'position'：'relative'}）

添加到div2，只有当用户滚动页面并且div1在页面上不再可见时。当div1再次可见时，我想删除css规则

---

有人能帮我吗？

我想你应该对window.onscroll、window的高度和div1的高度做些小动作。如…在onscroll方法中执行一些代码…检查窗口高度，检查div1的高度，对其进行一些计算，并检查div是否在视线之外…如果为真…删除css。

我认为您应该对window.onscroll、窗口高度和div1的高度执行一些技巧。如…在onscroll方法中执行一些代码…检查窗口高度，检查div1的高度，对其进行一些计算，并检查div是否不可见…如果为true…删除css。

您可以尝试以下代码：

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

}
});

---

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

您可以尝试以下代码：

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

}
});

---

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

这并不完美，但我已经为你编写了一个快速插件来解决这个问题：

它可以通过两种方式使用：

它为您提供了一个新的选择器

console.log（$（“#elem”）.is（“：inView”）？“可见”：“不可见”）

您还可以使用此选项获取所有可见元素，例如。
console.log（$（（p:inView”）.get（）

以及类似事件侦听器的功能
$（“#watchThisElement”）.visibilityChange（函数（可见）{
如果（可见）{
//做这个。。。
}
否则{
//那样做。。。
}
} ); 

注意：这是不完整的，原因很多

它只处理垂直滚动
它不处理iFrame（可能会因为嵌套滚动而糟糕透顶）
没有解绑的办法
如果你看很多元素，它可能会变慢
不考虑窗口大小调整
这是我很快从类似的代码中破解出来的

如果JSFIDLE链接曾经失效，那么下面是实际的代码和标记：

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>

#status{
    position: fixed; 
    right: 0; 
    top: 0; 
    background-color: red; 
}

#above, #below{
    height: 800px; 
    background-color: yellow; 
}

/**
 * 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" ); 
} );

javascript:

<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>

#status{
    position: fixed; 
    right: 0; 
    top: 0; 
    background-color: red; 
}

#above, #below{
    height: 800px; 
    background-color: yellow; 
}

/**
 * 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" ); 
} );

/**
*jquery（in）可见性插件。。。
*/
（函数（$）{
var w=$（窗口）；
//添加自定义“：inView”选择器
$.expr['：'].inView=函数（obj）{
变量$this=$（obj）；
var relY=$this.offset（）.top-w.scrollTop（）；
return relY>=0&&relY这并不完美，但我已经为您编写了一个快速插件来解决这个问题：

它可以通过两种方式使用：

它为您提供了一个新的选择器
console.log（$（“#elem”）.is（“：inView”）？“可见”：“不可见”）；

您还可以使用此选项获取所有可见元素，例如。
console.log（$（（“p:inView”）.get（）；

以及类似事件侦听器的功能
$（“#watchThisElement”）.visibilityChange（函数（可见）{
如果（可见）{
//做这个。。。
}
否则{
//那样做。。。
}
}）

注意：这是不完整的，原因很多

它只处理垂直滚动
它不处理iFrame（可能会因为嵌套滚动而糟糕透顶）
没有解绑的办法
如果你看很多元素，它可能会变慢
不考虑窗口大小调整
这是我很快从类似的代码中破解出来的

如果JSFIDLE链接曾经失效，那么下面是实际的代码和标记：

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>

#status{
    position: fixed; 
    right: 0; 
    top: 0; 
    background-color: red; 
}

#above, #below{
    height: 800px; 
    background-color: yellow; 
}

/**
 * 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" ); 
} );

javascript:

<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>

#status{
    position: fixed; 
    right: 0; 
    top: 0; 
    background-color: red; 
}

#above, #below{
    height: 800px; 
    background-color: yellow; 
}

/**
 * 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" ); 
} );

/**
*jquery（in）可见性插件。。。
*/
（函数（$）{
var w=$（窗口）；
//添加自定义“：inView”选择器
$.expr['：'].inView=函数（obj）{
变量$this=$（obj）；
var relY=$this.offset（）.top-w.scrollTop（）；
return relY>=0&&relY我可以试试，但如果div1仍然可见，我不知道如何控制向上滚动页面…嗯，我认为拥有div1高度是唯一的解决方案…你怎么想？如果你在向下滚动之前知道div在哪里（查看他在页面中的位置和高度）您必须能够确定当页面向上滚动时，div是否应该再次可见。html中的onscroll属性是什么意思？还是jquery scroll（）因为onscroll只受IEI支持，我是说普通的js函数，但是对于交叉浏览器的支持，你可以使用J查询库：我可以尝试，但我不知道如果div1仍然可见，如何控制向上滚动页面…嗯，我认为拥有div1高度是唯一的解决方案…你怎么想？如果在向下滚动（查看div在页面中的位置和高度）之前知道div在哪里，则必须能够确定当页面向上滚动时div是否应该再次可见。html中的onscroll属性是什么意思？或jquery scroll（）因为onscroll仅受IEI支持，即正常的js函数，但对于交叉浏览器支持，您可以使用JT。查询库：完全符合您的要求：。完全符合您的要求：。