Question

我正在努力使网站标题变得粘稠，将徽标img设置得更小，并在用户向下滚动页面100px后重新定位导航链接。

以下是我目前的情况：

$(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'});

    }
});
});

我遇到的问题是在向下滚动并且所有动画完成后，在重新启动之后，没有任何“其他”动画执行。

Answer 1

如果条件允许，请尝试添加“=”。

$(document).scrollTop() >= 100

请看这里Fiddle

Answer 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'});
    }

});

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

Waypoint功能强大，允许程序员在用户滚动到页面上的某个点时触发事件。常见的用途是在导航栏到达视口的顶部时按照上面的代码片段或触发动画制作棒。

如何在向下滚动100px之后运行一组动画？

2 个答案: