用JavaScript定位元素時遇到問題

Question

我正在嘗試實現一個導航欄，該導航欄在用戶滾動到它時被“捕獲”。 我正在實現目標，但通過當前的嘗試，這也在移動我滾動的主要內容，而這並不是我想要實現的。 這是我的https://jsfiddle.net/abp1rwhp/

$(function(){
var navHeight = $('#nav-bar').offset().top;
console.log(navHeight)
$(window).on('scroll', function() {
    if(screen.width < 980) {
    }
    if($(window).scrollTop() > navHeight){
        $('#nav-bar').css({
            'top': $(window).scrollTop() > 0 ? '0px' : '0px',
            'position': 'fixed'
        })
    }
    if($(window).scrollTop() < navHeight){
        $('#nav-bar').css({
            'top': '',
            'position': 'relative'
        })
    }
});
})

如您所見，滾動時內容部分向下移動（我認為40px），我該如何解決該問題？

Answer 1

由於導航欄最初是相對的，因此它會向下推動內容部分。 當您將其位置固定時，該部分會上升，因為導航欄不再使用頁面中的該空間。

為了解決這個問題，當您將導航欄的位置設為相對位置時，可以為該部分的上邊距設置為40px，以便保留40px的空間。

Answer 2

我可以通過在兩個if語句中重寫CSS來解決您的問題，如下所示：

    if ($(window).scrollTop() > navHeight) {
        $('#nav-bar').css({
            'top': '0px',
            'position': 'fixed'
        });
    }

    if ($(window).scrollTop() < navHeight) {
        $('#nav-bar').css({
            'top': '80px',
            'position': 'absolute'
        });
    }

您不希望#nav-bar是相對的，因為那樣會將其重新插入到文檔流中，從而將內容壓低。 換句話說，它按照通常的方式進行布局，然后在此之后從頂部，左側等位置應用任何定位。

取而代之的是，我將文檔加載時的頂部位置（80像素）設為絕對位置。