Question

我试图检查何时从带有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>

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%;
}

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;
            }
        } 
    });
});

对所有人来说，我有一个愚蠢的错误，我可以删除这个问题：（

Answer 1

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

^有你的问题

此外，不要将div的高度相加，而是使用顶部偏移量。

DEMO

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

Answer 2

您永远不会声明passed_clients变量。

改变这个：

var passed_service = false;
var passed_service = false;

到此：

var passed_service = false;
var passed_clients = false;

工作小提琴：http://jsfiddle.net/XUEfD/8/

Answer 3

工作Demo link

use this: (parseInt($("#service").height()) + parseInt($("#clients").height()))

$(document).ready(function() {
var passed_service = false;
var passed_clients = 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;
        }
    }

    //console.log($(window).scrollTop());
    if($(window).scrollTop() >= (parseInt($("#service").height()) + parseInt($("#clients").height()))){
        if(!passed_clients){
            alert("To #clients");
            passed_clients = true;
        }
    } 
});
});

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

3 个答案: