Question

我正在使用此代码在滚动后使导航栏粘在页面顶部：

var nav=$('body');
var scrolled=false;
    $(window).scroll(function(){
        if(175<$(window).scrollTop()&&!scrolled){
            nav.addClass('stuck');
            $('.navigation-class').animate({marginTop:80},1000);
            scrolled=true;
        }
        if(175>$(window).scrollTop()&&scrolled){
            $('.navigation-class').animate({marginTop:0},0,function(){nav.removeClass('stuck');$('.navigation-class').removeAttr('style');});
            scrolled=false;
        }
    });

问题是，如果用户快速上下滚动页面，并且导航仍然是动画，它将继续动画，然后突然跳入其设计位置，这会给菜单带来打嗝效果。

尝试快速滚动this page以实时查看。

是否可以像其他网站一样顺利运行？

谢谢你们。

Answer 1

编辑：在重新阅读问题之后，我意识到问题可能是当用户向后滚动到175px以上时你没有取消动画。

据推测，你正在将position：float应用到你的导航元素？你是在用户向上滚动时立即删除浮动的吗？

尝试将queue选项设置为false（请参阅https://api.jquery.com/animate/），这样动画就不会等待另一个完成。

也许您可以尝试摆脱JQuery动画并将其替换为CSS过渡？

也许是这样的？

var nav=$('body');
var scrolled=false;
var scrollToggle = function(){
        $(window).off('scroll');
        if(175<$(window).scrollTop()&&!scrolled){
            nav.addClass('stuck');
            $('.navigation-class').animate({marginTop:80},1000, function() {
                $(window).on('scroll', scrollToggle);
            );
            scrolled=true;
        }
        else if(175>$(window).scrollTop()&&scrolled){
            $('.navigation-class').animate({marginTop:0},0,function({
                nav.removeClass('stuck');
                $('.navigation-class').removeAttr('style');
                $(window).on('scroll', scrollToggle);
            });
            scrolled=false;
        }
};

$(window).on('scroll', scrollToggle);

我自己在WIP中有类似的东西。我会在这里发布它只是略微编辑，也许它对你有用。

var headerFloat = function() {
            //Header
        var pageHeader = $('#pageHeader'), pos = '',
            headerMain = $('#headerMain'), headerMainHeight = '',
            content = $('#content'), contentPadding = '',
            pageTitle = $('h1.currentPage'), pageTitleTop = '';

        if($(window).scrollTop() >= 95) {
            pos = "fixed";
            headerMainHeight = '75px';
            contentPadding = '225px';
            pageTitleTop = '55px';
            contentHeaderTop = '130px';
        }

        //Header
        pageHeader.css('position', pos);
        headerMain.css('height', headerMainHeight);
        content.css('padding-top', contentPadding);
        pageTitle.css({ 'transition': 'all 0s', 'position': pos, 'top': pageTitleTop });
        pageTitle[0].offsetHeight; //force "reflow" of element -- stackoverflow.com/questions/11131875/#16575811
        pageTitle.css('transition', '');
    };

$(document).ready(function() {
    /* *** SCROLL -> FLOAT HEADER *** */
    $(window).on("scroll.float", headerFloat);

});

在JQuery css函数中输入''（空字符串）会将其重置为原始值。你应该这样做而不是.removeAttr（'style'）; 我也会避免滚动的布尔值。我认为无论如何你需要它，如果scrollTop＆lt; 175，你永远不会滚动，反之亦然。

粘滞导航栏无法正常工作

1 个答案: