当用户滚动到特定 DIV 时运行 JavaScript 函数。

Question

当用户滚动到页面的另一个div或另一节时，我希望运行不同的功能。有没有办法实现这个需求？

- kduan

---

这些部分是彼此相邻的吗？ - patrick

Answer 1

这里已经有答案了 -->> Jquery中的动态滚动位置

有一个很棒的插件可以做到这一点，叫做WAYPOINT

我在jsfiddle上设置了一个示例，看看吧

HTML

<div class="first"></div>
<div class="second"></div>

CSS

.first {
    background:green;
    height: 600px;
    width:100%;
}
.second {
    background:red;
    height: 600px;
    width:100%;
}

JS

$('.second').waypoint(function() {
    alert('You have scrolled to an entry.');
}, {
    offset: '100%'
});

- Vikas Ghodke

---

嗯，我正在尝试使用 Waypoint，但当我滚动到 div 时，函数没有运行。 - kduan

没关系，它运行良好。谢谢！ - kduan

我的也不行.... :( 你是怎么做到让它工作的 @kduan - sphoenix

Answer 2

有很多方法可以实现这个目标，其中最简单的方法是：

var element = $('#my-div');

function myFunction() {
    alert('I am here!');
}

$(window).scroll(function(){
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    if ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)) {
        myFunction();
    }
});

还有 jQuery Appear插件 和 Waypoints插件:

$('#my-div').appear(function() {
    alert('I am here!');
});

$('#my-div').waypoint(function() {
    alert('I am here!');
});

- emerkulova