jquery - 粘性导航栏向上滚动不返回 "else"函数不删除类

Question

我的导航栏在向下滚动时有效，但在向上滚动时不会停在原始位置。我看到另一篇文章解决了类似的问题，但我无法以某种方式应用它来纠正我的问题，当然我对此很陌生。最初导航栏根本不起作用，但通过大量阅读 stackoverflow，我能够让它运行一半。希望你们能解决我的问题，哈哈，无论哪种方式，提前阅读。

适用的 CSS-

nav {
    z-index: 500;
    background-color: #e7ecf2;
  }  
  .nav-placeholder {
    margin: 0 0 20px 0;
  }
  .fixed {
    position: fixed;
    top: 5px;
    left: 0;
    width: 100%;
    background-color: transparent;
  }
  .fixed .nav-inner {
    max-width: 700px;
    margin: 0 auto;
    background-color:transparent;
  }

适用的JQuery-

$(document).ready(function() {
  var navOFFset = $("nav").offset().top;
  $("nav").wrap('<div class="nav-placeholder"></div>');
  $(".nav-placeholder").height($("nav").outerHeight());
  $("nav").wrapInner('<div class="nav-inner"></div>');

  $(window).scroll(function() {
    var scrollPos=$(window).scrollTop();

    if (scrollPos => navOffset) {
   $("nav").addClass("fixed");
    } else {
      $("nav").removeClass("fixed");

    }
  });
});

适用的 HTML-

<nav class="row wrapme container-fluid"><div class="nav-placeholder">
     <div class="nav-inner"><div class="col-sm-3">
  <button class="btn btn-block target">About Me</button></div>
       <div class="col-sm-3"> <button class="btn btn-block target" id="target2">Portfolio</button></div>
       <div class="col-sm-3"> <button class="btn btn-block target" id="target3">Contact</button></div>
          <div class="col-sm-3"><button class="btn btn-block target" id="target3">Links</button></div>
       </div> </div></nav>

Answer 1

在逻辑上做了一个小改动。如果 scrollPos = navOffset 则应删除“固定”类。

$(window).scroll(function() {
    var scrollPos=$(window).scrollTop();

    if (scrollPos > 0) {//change removed = and navPosition param
   $("nav").addClass("fixed");
    } else {
      $("nav").removeClass("fixed");

    }
  });

希望这对您有所帮助。