Question

我有3个div，如<div class="diva">diva</div>，<div class="divb">divb</div>和<div class="divb">diva</div>，颜色为红色，黄色和蓝色。所有都是一个低于其他级联。它们宽400 px。

当我们接近浏览器的顶部（滚动时）时，我想将div b和c的颜色更改为黑色，比如说它们距离顶部是40px还是以下。我怎么能这样做？

Answer 1

请尝试以下代码行：

jQuery(window).scroll(function(){
    if (jQuery(this).scrollTop() > 40 ) {
        $(".divb").css({
            "background":"black"
        })
        $(".divc").css({
            "background":"gray"
        })
}
});

40 是您从浏览器顶部开始的距离以及malakukan向下滚动并且距离超过 40 （40px）时滚动页面的值，然后jQuery将更改css中的数据。 Divb和。 DIVC。希望能帮助

Answer 2

使用

解决

$(window).scroll(function(){
  var xx = $(document).scrollTop();
  if(xx > 360){
    //change color
  }
})

Answer 3

使用jquery scrollTop() - ref

在jsfiddle

上查看

<强> jquery的：

$(window).scroll(function() {

    if($(window).scrollTop()>=828) {
        $("#divc").css({ "background":"black"} );
        $("#diva").css({ "background":"red"} );
        $("#divb").css({ "background":"green"} );
    }
    else if($(window).scrollTop()>=418) {
        $("#divb").css({ "background":"black"} );
        $("#diva").css({ "background":"red"} );
        $("#divc").css({ "background":"gray"} );
    }
    else if($(window).scrollTop()>8) {
        $("#diva").css({ "background":"black"} );
        $("#divb").css({ "background":"green"} );
        $("#divc").css({ "background":"gray"} );
    }
    else{
        $("#diva").css({ "background":"red"} );
    }
});

<强>的CSS：

body{
    padding:0px;
}
#diva,#divb,#divc{
    display:block;
    margin-bottom:10px;
    position:relative;
    width:400px;
    height:400px;
}
#diva{
    background:grey;
}
#divb{
    background:green;
}
#diva{
    background:red;
}

<强> HTML：

<div id="diva"> diva </div>
<div id="divb"> divb </div>
<div id="divc"> divc </div>

<br/><br/><br/><br/><br/><br/><br/>

如何在jQuery中识别元素是否接近浏览器窗口的顶部

3 个答案: