如何在頁面滾動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後運行一組動畫？

回答

相關問題