動畫導航欄

Question

我很想知道如何在向下滾動時製作導航欄動畫。我知道的一個例子是FlatIcon。我只需要知道如何讓網站識別人物何時滾動。我可以做自己的動畫

Answer 1

假設你希望用戶滾動超過90像素

JAVA腳本代碼

//ONSCROLL FUNCTION TO HIDE MENU 
function hideMenu(){ 
    var mouseX = window.scrollY; 
    var menu = document.getElementById("pageHeader"); 
    if(mouseX > 90){ 
     menu.style.height = "50px"; 
     menu.style.transition = "height 1s"; /*This is Optional */ 
    }else { 
     menu.style.height = "100PX"; 
     menu.style.transition = "height 1s"; 
    } 
} 
window.addEventListener("scroll",hideMenu); 

CSS代碼後更改菜單高度。這是簡單的JUST FOR瞭解

<style> 
#pageHeader { 
height: 100px; 
} 
</style> 

HTML代碼

<div id="pageHeader"> 
<!-- HERE IS YOUR MENU ITEMS OR THEIR CONTAINER... --> 
</div> 

在這段代碼此功能hideMenu（）總是開始時用戶向下滾動頁面。當他們向下滾動超過90px時，菜單的高度爲50px。您可以通過使用if else條件來添加更多效果...... 希望這會對您有所幫助。如果你有進一步的問題評論他們..

Answer 2

你可以激發一個jquery函數，並啓用一個類，通過CSS放置position:fixed。 Live Example

HTML

<div id="nav-bar"></div> 
<div id="some-content"></div> 
<div id="anchor-point"></div> 
<div id="sticky"></div> 
<div id="some-content2"></div> 

CSS

#nav-bar{ 
    margin-top: 0; 
    background-color: #000; 
    height:60px; 
    position: fixed; 
    top: 0; 
    z-index: 1; 
    width:100% 
} 
#some-content{ 
    height: 500px; 
} 
#sticky{ 
    width:100%; 
    height:50px; 
    background-color:#ccc; 
} 

#sticky.stick { 
    margin-top: 60px !important; 
    position: fixed; 
    top: 0; 
    z-index: 2000; 
} 
#some-content2{ 
    height: 500px; 
} 

的JQuery/JS

function stick_sticky() { 
    var window_top = $(window).scrollTop(); 
    var div_top = $('#anchor-point').offset().top; 
    if (window_top > div_top) { 
     $('#sticky').addClass('stick'); 
     $('#anchor-point').height($('#sticky').outerHeight()); 
    } else { 
     $('#sticky').removeClass('stick'); 
     $('#sticky-anchor').height(0); 
    } 
} 

$(function() { 
    $(window).scroll(stick_sticky); 
    stick_sticky(); 
});