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

我想让一个网站标题变得粘稠，使标志img变小，并且一旦用户在页面上滚动100px就重新定位导航链接。如何在页面滚动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'}); 

    } 
}); 
});

我遇到的问题是向下滚动之后，一切动画，回到了没有“其他”的动画执行后。

来源

2013-08-27 Daniel Garibay

你有没有尝试过使用waypoints？ – otherDewi

@otherDewi是否有可能通过航点运行多个动画？用我目前的代码，我可以让粘性导航功能，但只要我添加动画，一切都打破。 –

看到我更新的答案 – otherDewi

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

$(document).scrollTop() >= 100

看一看这里Fiddle

来源

2013-08-27 05:17:00

谢谢@SAM这似乎工作，但只有当我将动画速度设置为1时，这种方式会破坏动画的目的。如果我没有设置动画速度，在我滚动回页面顶部后需要重新进行重置 –

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

});

代码感测涡旋件的方向然后棍棒和相应unsticks的代码。

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

来源

2013-08-27 05:22:46 otherDewi

是否可以通过航点运行多个动画？用我目前的代码，我可以让粘性导航功能，但只要我添加动画，一切都打破。 –

尽可能多的你想要的 – otherDewi

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

回答

相关问题