3

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

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

请帮忙。

4

4 回答 4

4

他们监听文档的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最适合您，具体取决于元素的定位方式以及正在滚动的内容。

演示

于 2012-06-14T11:49:50.303 回答
0

你可以做的是，从他们的网站分析这个文件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;

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

于 2012-06-14T12:04:56.640 回答
0

我刚刚在这里回答了这个问题哈哈，如果看到元素，做点什么

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

于 2012-06-14T11:50:44.610 回答
0

jQuery waypoints插件正是为你做的：

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

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

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

于 2014-01-25T10:20:32.053 回答