Question

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

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

请帮忙。

Answer 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

Answer 2

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

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

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

Answer 4

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

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

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

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

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

4 个答案: