我有一個導航欄，當您向下滾動時，它會變得固定。 除非您向下滾動，否則它不起作用

Question

所以我想出了如何修復它，等等：

HTML：

<div id="header_nav">
      <nav>
        <ul class="navi">
          <li><a href="">Home</a></li>
... Stack overflow wont let me add more code, but there are more links, etc 

JS：

var elementPosition = $('#header_nav').offset();
$(window).scroll(function() {
  if ($(window).scrollTop() > elementPosition.top) {
    $('#header_nav').css('position', 'fixed').css('top', '0');
  } else {
    $('#header_nav').css('position','static');
  }
});

當您將鼠標懸停在每個選擇上時，我的導航欄應該具有懸停效果。 懸停效果僅在完成向頂部固定的過渡后才起作用。 鏈接也不可單擊。 我試着玩JS，但我不知道。 好像條形圖僅保存為圖像，直到您完全向下滾動為止。

完整代碼在這里： http ： //liveweave.com/XGPWVt

Answer 1

將<div id="wrapper">部分移到<header>標記內。

更新的示例： http : //liveweave.com/aGN9YV

Answer 2

如果您也將靜態更改為相對，也可以使用