固定导航条的JQuery功能不工作

由于某种原因，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;
}