jquery css - 固定菜单跳转

Question

我有一些代码如下： https://jsfiddle.net/k77986kL/

想法是有一个 header（包含图像、文本和各种其他内容），下面是一个导航菜单。我的目标是在页面首次加载时让导航菜单在 header 下方开始，但是当用户向下滚动并且菜单到达屏幕顶部时，它会停留在那里直到用户向上滚动

正如您从 fiddle 中看到的那样，我得到的行为是正确的，但有轻微的跳跃性。当你向下滚动到导航菜单到达顶部的那一刻，内容突然跳了下来。而当你向上滚动页面时，内容又会跳转。它跳得不多，但跳得足够明显，尤其是在快速滚动时

查看我的 jquery 我看不出是什么导致了这个问题：

$(function () {
    var nav = $('nav');
    var navHomeY = nav.offset().top;
    var isFixed = false;
    var $w = $(window);
    $w.scroll(function () {
        var scrollTop = $w.scrollTop();
        var shouldBeFixed = scrollTop > navHomeY;
        if (shouldBeFixed && !isFixed) {
            nav.css({
                position: 'fixed',
                top: 0,
                width: nav.width()
            });
            isFixed = true;
        } else if (!shouldBeFixed && isFixed) {
            nav.css({
                position: 'relative'
            });
            isFixed = false;
        }
    });
}

);

这一切都是从我的主要项目文件中提取的，因此其中可能有一些 css 元素是演示本身所必需的，但我保留了那些选择器的 CSS 完好无损以防他们可能导致此问题

Answer 1

问题是，当您设置 position: fixed 时，nav 不在页面流中，留下它占用的 space。因此内容会增加以填充 space。当 nav 变为 position: relative.

时，情况正好相反

为了解决这个问题，我简单地为 header 元素设置了一个 margin-top 来填充 nav 占据的 space，当它不存在时我将其删除需要。

DEMO

完整代码如下：

$(function () {
    var nav = $('nav');
    var header = $('header');  // get header element
    var navHomeY = nav.offset().top;
    var isFixed = false;
    var $w = $(window);
    $w.scroll(function () {
        var scrollTop = $w.scrollTop();
        var shouldBeFixed = scrollTop > navHomeY;
        if (shouldBeFixed && !isFixed) {
            nav.css({
                position: 'fixed',
                top: 0,
                width: nav.width()
            });
            header.css('marginTop', nav.height()); // set margin-top
            isFixed = true;
        } else if (!shouldBeFixed && isFixed) {
            nav.css({
                position: 'relative'
            });
            header.css('marginTop', 0); // remove margin-top
            isFixed = false;
        }
    });
}

);

jquery css - 固定菜单跳转

jquery css - fixed menu jumping

html

javascript

css

jquery

menu