粘性导航栏无法正常工作

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

问题是，如果用户快速上下滚动页面，并且导航仍在动画中，它将继续播放动画，然后突然跳到其设计位置，从而使菜单产生打h效果。

尝试快速滚动此页面以实时查看它。

是否可以使其像其他网站一样平稳运行？

谢谢。

Answer 1

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

想必您正在申请职位：是否浮动到导航元素？ 用户向上滚动时，是否要立即删除浮动？

尝试将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 <175，您将永远不会被滚动，反之亦然。