Question

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

这个想法是有一个标题（包含图像，文本和其他各种东西），下面是导航菜单。我的目标是在页面首次加载时让导航菜单从标题下方开始，但是当用户向下滚动并且菜单点击屏幕顶部时，它将保持在那里直到用户向上滚动

正如你可以从小提琴中看到的那样，我得到的行为是正确的，但它有点轻微的跳跃。当您向下滚动到导航菜单到达顶部的那一刻时，内容会突然跳下来。当您向上滚动页面时，内容会再次跳转。它并没有经常跳跃，但跳得足够明显，特别是如果快速滚动

看着我的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不在页面流中，而是释放它占用的空间。因此，内容上升以填补该空间。当nav变为position: relative时会发生相反的情况。

要解决此问题，我只需将margin-top设置为填充header所占空间的nav元素，然后在不需要时将其删除。

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 - 固定菜单跳跃

1 个答案: