アニメーションナビゲーションバー

Question

はあなたには、いくつかを下にスクロールすると、ナビゲーションバーのアニメーションを作成する方法のだろうか。私が知っている1つの例は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コードの後に​​、あなたのメニューの高さを変更するとします。 ITは、SIMPLE 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 conditionを使用して、さらに多くのエフェクトを追加することができます。 これがあなたを助けてくれることを願っています。あなたは、さらに質問がある場合は...それらをコメント

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のように** VARするmouseX = window.scrollY javascriptの

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