jquery固定菜单跳转

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;
        }
    });
}

);