Question

由于bootstrap固定导航栏因某些原因对我不起作用，我决定为此找到一个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/

固定导航栏的JQuery功能无法正常工作

1 个答案: