当我们滚动到一个div的位置时，使用jquery使其动画化

Question

我需要一种jQuery功能，当用户滚动页面时，如果某个div出现在屏幕的可见部分/中间位置，就会触发某些操作。例如：Verelo.com网站。如果您向下滚动，您将看到一个球形图标和两个图标以及带有黑色箭头的jQuery动画。我需要类似的功能。我不希望完全相同，但至少要接近。

在我的努力中，我找到了这个例子：Verelo.com，并进行了一些搜索。但是目前还没有找到任何东西。

请帮忙。

- Deepak Kumar

Answer 1

他们监听文档的滚动事件，并计算文档的scrollTop与元素位置的比较。

基本上，要考虑计算一个元素是否在视口中（只考虑纵向滚动），需要考虑以下参数：文档的滚动位置、视口的高度、目标元素的位置和目标元素的高度。

$(window).scroll(function() {

   var scrollTop = $(document).scrollTop();
   var viewportHeight = $(window).height();

   var targetPosition = $('#target').position().top;
   var targetHeight = $('#target').outerHeight();

   // viewport stretches from scrollTop to (scrollTop + viewportHeight)

});

你还需要确定使用.position().top还是.offset().top，这取决于元素的定位方式以及被滚动的内容。请参考演示。

- David Hedlund

---

@Deepak：你会做，嗨？我只是试图解释这个过程。好吧，答案已经更新了一些代码和演示。 - David Hedlund

太棒了！！！+1..非常好用。还有一个问题。基本上，我有4张图片。现在我想要的是当div进入焦点时，每个图像都应该在一定的时间后进行动画。例如：我有A.jpg、B.jpg、C.Jpg。现在当我滚动页面并且div处于焦点时，首先A.jpg应该动画，然后是B.jpg，最后是C.jpg。我认为一些settimeout函数或类似的东西可以工作。但还有一件事是它只应该动画一次。 - Deepak Kumar

@Deepak：jQuery的.animate只会动画一次，除非你指示它进行其他操作，并且它接受一个回调函数，你可以使用它来触发连续的动画；当然，第一个动画是从滚动事件开始启动的。 - David Hedlund

Answer 2

我刚刚在这里回答了这个问题哈哈，如果元素在视野中，做某事

这个插件位于这里，https://github.com/protonet/jquery.inview，它提供了一个触发器，您可以绑定它来确定何时一个元素处于视图中

- Bryan

Answer 3

你可以做的是，分析来自他们网站的该文件http://www.verelo.com/js/themeFunctions.js的源代码。它没有被压缩，所以你可以看到他们是如何实现的:

以下是从那个js文件中必要的函数列表。

$(window).scroll(function scrollDetection() {
                scrollLogic();
                });

当窗口滚动时，scrollLogic();被调用。现在scrollLogic();函数中有什么内容呢？由于它很大，我只添加了必要的部分。

function scrollLogic(){
    //If page is scrolled further than 100%, drop navigation menu from top and do a dance. Preferably an Irish River dance of sorts
    if( $(window).scrollTop() > howItWorksPosition) {
        window.sliderTimerOn = 'false';
        clearInterval(intervalId);

        if( $(window).scrollTop() > howItWorksPosition && $(window).scrollTop() < featuresPosition) {btnClick('.howItWorks'); executeScene(); window.ourCustomersFrame = 'false';}
.......
}

howItWorksPosition 已经在之前被计算了

    howItWorksOffset = $('#howItWorks').offset();
howItWorksPosition = howItWorksOffset.top -180;

当窗口滚动到该div时，他们调用executeScene();并执行动画。您可以检查executeScene();以了解他们如何执行动画。

- Prasenjit Kumar Nag

Answer 4

jQuery waypoints插件可以为您准确地完成此操作：

$('.thing').waypoint(function(direction) {
    // do stuff
}, { offset: 50 })

在上面的例子中，当元素顶部距离视口顶部50像素时，处理程序函数运行。您可以使用方向参数检查用户是向“下”还是向“上”滚动。

有关更高级选项和示例，请参见jquery waypoints文档页面。

- sepehr