JQuery浮动菜单栏，滚动位置和延迟

JQuery floating menu bar, scroll position and delay

本文关键字：位置 延迟 滚动 菜单栏 JQuery      更新时间：2023-09-26

我正在制作一个菜单栏，我对JQuery相当陌生。我希望菜单栏在向下滚动时延迟，但在向上滚动时，我希望它紧贴在浏览器窗口的顶部，没有延迟。现在，两侧的延迟相同，当滚动到顶部时，没有延迟。

我希望有人能帮助我:)

$(document).ready(function(){
var speed = 1000;
var speedtop = 0;
var menu = $('nav#header');
var offset = menu.offset().top;
var menuStartPos = menu.position().top;
var top_offset = 0;
updateFloatingMenu(); //we don't have this just yet
$(window).scroll(function(){
    updateFloatingMenu();
});
function updateFloatingMenu(){
    var scrollAmount = $(document).scrollTop();
    var newPosition = menuStartPos + scrollAmount;
    if(scrollAmount > offset){
        var topPos = (newPosition-offset) + top_offset;
        menu.stop().animate({top: topPos}, speed);
    }else{
        menu.stop().animate({top: menuStartPos}, speedtop);
    }
};
});

将类添加到 css 中：

#header.fixed {
    position:fixed;
    top: 0 !important; /* important, to override inline style-tag */
}

向上滚动时将此类添加到菜单中，以始终将其固定在页面顶部

var offset = 0;
function updateFloatingMenu(){
    var scrollAmount = $(document).scrollTop();
    if (scrollAmount > offset){
        menu.stop().removeClass('fixed').animate({'top': scrollAmount}, speed);
    } else {
        menu.stop().addClass('fixed')
        menu.css('top', scrollAmount); // Set top here so it's in the right place when reverting scroll
    }
    offset = scrollAmount; // Update current offset
}
相关文章：