当我们滚动到它的位置时，使用 jquery 为 div 设置动画答案

【问题标题】：Animate a div with jquery when we scroll to its position当我们滚动到它的位置时，使用 jquery 为 div 设置动画
【发布时间】：2012-06-14 11:44:40
【问题描述】：

我需要一个 jquery 功能，当用户滚动页面并且某个 div 出现在屏幕的可见部分/中间时，会发生一些操作。例如：Verelo.com。如果向下滚动，您将看到一个带有两个图标的 glob 以及一个带有黑色箭头的 jquery 动画。我需要类似的功能。我不希望准确，但至少是最接近的。

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

请帮忙。

【问题讨论】：

标签： jquery html jquery-animate

【解决方案1】：

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

基本上，为了计算元素是否在视口中（仅考虑 Y 轴滚动），您需要考虑的参数是文档的滚动位置、视口的高度、位置目标元素的高度，以及目标元素的高度。

$(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 是否最适合您，这取决于元素的定位方式以及正在滚动的内容。

Demo

【讨论】：

@Deepak：你知道，嘿？我只是试图解释这个过程。好吧，答案已经更新了一些代码和演示。
太棒了！！！..+1..就像一个魅力。还有一个问题。基本上，我有 4 张图片。现在我想要的是，当 div 成为焦点时，每个图像都应该在一定数量后进行动画处理。例如：我有 A.jpg、B.jpg、C.Jpg。现在，当我滚动页面并且 div 处于 foucs 中时，首先 A.jpg 应该比 B.jpg 动画，然后是 C.jpg。我认为一些 settimeout 函数或类似的函数可以工作。但还有一件事是它应该动画一次。
@Deepak: jQuery .animate 只动画一次，除非你另有指示，它接受一个回调，你可以用它来触发顺序动画；当然，第一个动画是从滚动事件开始的。

【解决方案2】：

我刚刚在这里回答了这个问题哈哈，if element in sight, do something

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

【讨论】：

【解决方案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();。您可以查看executeScene(); 了解他们是如何制作动画的。

【讨论】：

【解决方案4】：

jQuery waypoints 插件为你做这件事：

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

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

有关更多高级选项和示例，请参阅jquery waypoints docs page。

【讨论】：