粘性导航栏向上滚动不 return "else" 功能不删除 class

Question

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

适用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 那么 "fixed" class 应该被删除。

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

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

    }
  });

希望对您有所帮助。

粘性导航栏向上滚动不 return "else" 功能不删除 class

sticky nav bar scroll up doesnt return "else" function not removing class

css

jquery

scroll

nav

navbar