javascript - jquery css - 固定菜单跳转

Question

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

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

正如您从 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 不在页面流中，它占用的空间是空闲的。因此内容会上升以填充该空间。当 nav 变为 position: relative 时，情况正好相反。

为了解决这个问题，我简单地为 header 元素设置了一个 margin-top 来填充 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;
        }
    });
}

);