固定导航栏的jQuery功能不起作用

Question

由于引导固定的导航栏由于某种原因对我不起作用，因此我决定为此找到一个JQuery解决方案。 我希望菜单栏一旦向下滚动即可固定（默认情况下不固定）。 我在选择器中尝试了不同的类和ID，但这是行不通的。 我已经准备好处理程序，并且将JQuery导入头部。

HTML：

   <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
         <div id="logo" data-lead-id="logo-id">
                <a id="logo-link" class="leadstyle-image-link" style="max-width: 232px; max-height: 232px;"><img src="./bootstrap-remake_files/Ztm0behQInDnkGpy_6VQNCZ-C8TObFubrNfYi14TuSEPNKrV3G0_GvdxRowtf1U2n9aAuCxw25g3Ih9vXX5Y=s0" alt="Logo" style="max-width: 232px; max-height: 232px;"></a>
           </div>
             <div class="navigation-navbar">
               <ul class="navigation-bar navigation-bar-left" data-lead-id="tabs-nav-id">
               </ul>
             </div>
           </div>
         </div>
      </div>
   </nav>

JS：

var position = $("nav").offset().top;

$(document).ready(function() {
function stickyHeader() {
  if (position < $(document).scrollTop()) {
    $("nav").addClass("sticky");
  } else {
    $("nav").removeClass("sticky");
  }
 }
});

$(window).scroll(function() {
  stickyHeader();
});

CSS：

.sticky {
  position: fixed;
  top: 0;
  left: 0;
}

Answer 1

它在以下情况下有效

$(document).ready

包装整个代码

另外，您还有几个额外的结束标记

最后，如果要在滚动后而不是在滚动开始后立即将其固定，则只需在条件栏上添加一个数字即可。

if (position < $(document).scrollTop() - 500)

在这里检查： http : //jsfiddle.net/y0u3gL9k/