检查滚动条是否使用jquery到达div

Question

检查滚动条是否使用jquery到达div

我正在尝试检查何时从带有jquery的滚动条到达div.我在stackoverflow上读了一些类似的问题,但都只在一个div上.我有4个div,高度:100%,我想知道当滚动条通过每个div.我尝试过,但只适用于第一个div.

HTML:

<body>
<div id="main"></div>
<div id="service"></div>
<div id="clients"></div>
<div id="about"></div>
</body>

Run Code Online (Sandbox Code Playgroud)

CSS:

body, html {
    height: 100%;
    padding: 0px;
    margin: 0px;
}
#main {
    background: red;
    height: 100%;
}
#service {
    background: green;
    height: 100%;
}
#clients {
    background: blue;
    height: 100%;
}
#about {
    background: yellow;
    height: 100%;
}

Run Code Online (Sandbox Code Playgroud)

JS:

$(document).ready(function() {
    var passed_service = false;
    var passed_service = false;
    $('body,html').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup', function(event){
        if($(window).scrollTop() >= ($("#service").height())){
            if(!passed_service){
                alert("To #service");
                passed_service = true;
            }
        }
        if($(window).scrollTop() >= ($("#service").height() + $("#clients").height())){
            if(!passed_clients){
                alert("To #clients");
                passed_clients = true;
            }
        } 
    });
});

Run Code Online (Sandbox Code Playgroud)

抱怨所有,我的愚蠢错误,我不能删除问题:(

Answer 1

kei*_*kei 6

var passed_service = false;
var passed_service = false; /* should be 'passed_clients' */

Run Code Online (Sandbox Code Playgroud)

^有你的问题

另外,不要将div的高度相加,而是使用顶部偏移量.

DEMO

$(window).scrollTop() >= $("#service").offset().top
$(window).scrollTop() >= $("#clients").offset().top
...

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，10 月前
查看次数：	6684 次
最近记录：	11 年，10 月前