粘性导航栏向上滚动不返回"否则"功能不删除类

时间:2017-08-11 20:23:02

标签: jquery css scroll navbar nav

我的导航栏向下滚动,但在向上滚动时不会停在原始位置。我看到另外一篇文章解决了类似的问题,但我无法以纠正我的问题的方式应用它,因为我对此非常陌生。最初导航栏完全不起作用,但是通过堆栈溢出这里的大量阅读我能够让它运行一半。希望你们可以解决我的问题大声笑,无论如何,感谢提前阅读。

适用的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>

0 个答案:

没有答案