Question

我有一个问题，但实际上我不知道该怎么问。

当我顺利通过一个点时，我试图让导航栏粘在上面。

我的参考是这个 - ＆gt; http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html

我的问题是，当我使用 IE或Chrome 进行检查时，会出现“闪烁”效果。

更像滚动功能将在滚动点后完成处理。因此Nav之后的东西（HTML）会在0.1~0.3秒内出现在导航的顶部，然后滚动功能将完成进程。即使是很短但是当导航上的HTML时它是可视化的。

但是，如果我使用 Firefox 进行检查，则没有这样的眨眼效果......

请问这里有什么问题？我该怎么检查？

我的设置是Nav，Nav z-index = 99之前的Anchor，滚动功能的内部位于下方。

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

});

js顺利导航

1 个答案: