如何在页面向下滚动 100px 后运行一组动画？答案

【问题标题】：How to run a set of animations after scrolling 100px down the page?如何在页面向下滚动 100px 后运行一组动画？
【发布时间】：2013-08-27 05:08:20
【问题描述】：

我正在尝试使网站标题变得粘性，使徽标 img 更小，并在用户向下滚动页面 100 像素时重新定位导航链接。

这是我目前拥有的：

$(document).ready(function() {

$(window).scroll(function() {
    if ($(document).scrollTop() > 100) {
        $('#header').addClass('sticky');
        $('#logo img').animate({'width':'200px','top':'-10px'});
        $('#header').animate({'height':'70px'});
        $('#menu_btns ul li').animate({'top':'-24px','left':'-90px'});
        $('#store_links').animate({'top':'-20px','left':'0px'});    

    }
    else {
        $('#header').removeClass('sticky');
        $('#logo img').animate({'width':'287px','top':'0px'});
        $('#header').animate({'height':'116px'});
        $('#menu_btns ul li').animate({'top':'0px','left':'0px'});
        $('#store_links').animate({'top':'0px','left':'0px'});

    }
});
});

我遇到的问题是在向下滚动并且所有动画后，在返回后没有“其他”动画执行。

【问题讨论】：

你试过使用航点吗？
@otherDewi 是否可以使用航点运行多个动画？使用我当前的代码，我可以让粘性导航起作用，但只要我添加动画，一切都会中断。
查看我的更新答案

标签： jquery header navigation jquery-animate fixed

【解决方案1】：

请尝试在 if 条件中添加“=”。

$(document).scrollTop() >= 100

看看这里Fiddle

【讨论】：

感谢@SAM，这似乎有效，但只有当我将动画速度设置为 1 时，才会违背动画的目的。如果我不设置动画速度，则在我滚动回页面顶部后需要永远重置

【解决方案2】：

搜索 waypoints.js。这是你需要的。使用航点的一个例子是

var $mainNav = $("header nav");

$mainNav.waypoint(function(direction){

    if(direction==="down"){
        //if the scroll direction is down then fix the nav ul to the top of the screen
        $(this).find('ul').css({position:'fixed', top: 0});
    }else{
        //if the scroll direction is up then position the nav ul back in the document flow
        $(this).find('ul').css({position:'static'});
    }

});

代码感知滚动的方向，然后相应地粘贴和取消粘贴代码。

Waypoints 功能强大，允许程序员在用户滚动到页面上的某个点时触发事件。常见用途是在导航栏到达视口顶部时制作导航栏，根据上面的代码 sn-p 或触发动画。

【讨论】：

是否可以使用航点运行多个动画？使用我当前的代码，我可以让粘性导航起作用，但只要我添加动画，一切都会中断。