用javascript定位元素的麻煩

我試圖實現一個導航欄，當用戶滾動到它時，它會「抓住」。我半實現了我的目標，但是隨着我目前的嘗試，這也是我滾動時的主要內容，這不是我想要實現的目標。下面是我有https://jsfiddle.net/abp1rwhp/用javascript定位元素的麻煩

$(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' 
     }) 
    } 
}); 
})

正如你所看到的內容部分向下移動（我認爲40像素）滾動時，我將如何去解決這個問題？

來源

2016-06-11 Max Power

因爲導航欄最初是相對的，所以它會按下內容部分。當您給定位置時，該部分會上升，因爲導航欄不再使用頁面中的該空間。

爲了解決這個問題，可以在給出導航欄位置相對的情況下，爲該段留出40px的頁邊距，以便保留40px的空間。

來源

2016-06-11 08:15:01

對我應該知道這一點。感謝提示Tobi :)。 –

我能夠通過重寫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是相對的，因爲重新將其插入流該文件，推下內容。換句話說，它按照它通常的方式進行佈局，然後在上面，左邊等應用任何定位。

取而代之，我將它與絕對位置從頂部（80px）的位置加載到文檔中。

來源

2016-06-11 08:16:10

感謝您的修復。畢竟這是一個愚蠢的錯誤。我的名譽太低而不能正確標記。一旦我獲得足夠的代表點數，我會回到這個位置。 –

用javascript定位元素的麻煩

回答

相關問題