我有一个导航栏，当您向下滚动时会固定。除非您向下滚动，否则它不起作用

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

如果您也将静态更改为相对，它也可以工作