jQuery的CSS-固定菜單跳轉

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時，情況恰恰相反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;
        }
    });
}

);