js平滑導航

Question

我有一個問題，但我實際上不知道如何問。

我試圖使導航欄在順利通過某個點時停留在頂部。

我的參考是這樣-> http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html

我的問題是，當我使用IE或Chrome瀏覽器進行檢查時，出現“ 閃爍 ”效果。

這更像是滾動功能將在滾動到該點之后完成過程。 因此，Nav之后的事物（HTML）將在0.1〜0.3秒內位於Nav的頂部，然后滾動功能將完成處理。 即使通過是很短的，但是當通過導航瀏覽HTML時，它卻是可視的。

但是，如果我使用Firefox進行檢查，則沒有這種閃爍效果.....

請問我遇到的問題是什么？ 我應該檢查什么？

我的設置是在Nav之前的錨點，Nav z-index = 99，而滾動功能的內部在下面。

            $(this).scrollTop() > $(anchor).offset().top
            ? nav.addClass('sticky')
            : nav.removeClass('sticky')

Answer 1

jQuery(document).ready(function($) {

    var my_nav = $('.navbar-sticky'); 
    // grab the initial top offset of the navigation 
    var sticky_navigation_offset_top = my_nav.offset().top;

    // our function that decides weather the navigation bar should have "fixed" css position or not.
    var sticky_navigation = function(){
        var scroll_top = $(window).scrollTop(); // our current vertical position from the top

        // if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
        if (scroll_top > sticky_navigation_offset_top) { 
            my_nav.addClass( 'stick' );
        } else {
            my_nav.removeClass( 'stick' );
        }   
    };

    var initio_parallax_animation = function() { 
        $('.parallax').each( function(i, obj) {
            var speed = $(this).attr('parallax-speed');
            if( speed ) {
                var background_pos = '-' + (window.pageYOffset / speed) + "px";
                $(this).css( 'background-position', 'center ' + background_pos );
            }
        });
    }

    // run our function on load
    sticky_navigation();

    // and run it again every time you scroll
    $(window).scroll(function() {
         sticky_navigation();
         initio_parallax_animation();
    });

});