jquery - 当我们滚动到它的位置时用 jquery 动画一个 div

Question

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

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

请帮忙。

Answer 1

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

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

$(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