固定に相対的な位置 - スライドさせる方法は？

Question

私はすべてのメニューを用意して、行きたいと思っています。私は現時点でJSに良いページを飛ばしているわけではありません。私が抱えている問題は、どこにも現れない代わりに、「固定」ナビゲーションを上下にスライドさせることです。

現在、私が持っているjQueryは、メニュー位置を相対位置から固定位置に変更する画面を約300px〜下でクラスをアクティブにしています。

注意：私はもともと静的な配置で動作するようになっていましたが、私のサイトのZ-インデックスや他の要素では苦労していましたので、相対的な（静的ではない） 。私はまた、javascriptと何らかの形でメニューを複製したくありません（いくつかの例を見てきました）。

jquery、またはcssを使用して、メニューの位置が固定に変更されたときにスライドダウンエフェクトとスライドアップエフェクトの両方を達成するにはどうすればよいですか？

以下のコードは、よろしくお願いします。

HTML：

<div class="nt-main-navigation-sticky"> 
    <!-- my nav, logo, etc, is in here. --> 
</div> 

CSS：

.nt-main-navigation-sticky { 
    position: relative; 
} 


.activeScroll .nt-main-navigation-sticky { 
    position: fixed; 
    top: 0; 
    left: 0; 
} 

のjQuery：

// get my header height 
var getHeaderHeight = $('.nt-main-navigation-sticky').outerHeight(); 


// add/remove body class 
$(window).scroll(function() { 

    if($(window).scrollTop() > getHeaderHeight + 200) { 

     $('body').addClass('activeScroll').css('padding-top', getHeaderHeight); 

    } else { 

     $('body').removeClass('activeScroll').css('padding-top', 0); 

    } 

}); 

Answer 1

あなたのCSSへの移行を追加します。

.nt-main-navigation-sticky { 
    position: relative; 
} 


.activeScroll .nt-main-navigation-sticky { 
    position: fixed; 
    top: -50px; // or whatever the height of the navbar 
    left: 0; 
    transition: top 600ms; 
} 

およびjs：

if($(window).scrollTop() > getHeaderHeight + 200) { 

    $('body').addClass('activeScroll').css('padding-top', getHeaderHeight); 
    $('.nt-main-navigation-sticky').css('top', '0px'); // will trigger transition 

} else { 
    $('.nt-main-navigation-sticky').css('top', '-50px'); // will trigger transition 
    $('body').removeClass('activeScroll').css('padding-top', 0); 

}