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

Posted 2023-03-06

【中文标题】JQuery浮动菜单栏，滚动位置和延迟

【英文标题】：JQuery floating menu bar, scroll position and delay

【发布时间】：2013-10-05 09:15:23

【问题描述】：

我正在制作一个菜单栏，而且我对 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);
    
;
);

【参考方案1】：

在你的 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