Question

我的导航栏出了问题。当用户向下滚动时，我希望它消失，当用户向上滚动时，我希望它再次出现。

然而我的问题是它适用于Chrome，Firefox，Safari等，但在Safari中我遇到了问题。当我滚动到页面顶部（仅在Safari中）时，＆＃34;隐藏导航栏＆＃34;函数触发器就像用户向下滚动一样。 Doest与窗口返回0有什么关系？

你们中的任何一个人是否知道这个问题或者能指出正确的方向，我将非常感激！

请问您是否需要更多信息，我会尝试进一步解释。

这是我的代码（在Safari中打开以查看问题）：

https://jsfiddle.net/erikwaahlstrom/wyagt61z/25/

＆＃13;

var lastScrollTop = 0;

$(window).on('scroll', function() {
  var currentScrollTop = $(this).scrollTop();

  if (currentScrollTop > lastScrollTop) {
    $('.main-nav').addClass('hidden');
  } else {
    $('.main-nav').removeClass('hidden');
  }

  lastScrollTop = currentScrollTop;
});

＆＃13;

body {
  position: relative;
  background-color: #888888;
  height: 100%;
  overflow: auto;
}

h1 {
  color: #fff;
}

.hidden {
  transform: translateY(-100%);
}

.main-nav {
  position: fixed;
  height: 70px;
  transition: all 0.3s ease;
  z-index: 801;
}

#menu_toggle {
  position: absolute;
  top: 13px;
  left: 400px;
  width: 35px;
  height: 45px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  z-index: 801;
}

#menu_toggle span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #FFFFFF;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}

#menu_toggle span:nth-child(1) {
  top: 17px;
}

#menu_toggle span:nth-child(2) {
  top: 17px;
}

#menu_toggle span:nth-child(3) {
  bottom: 17px;
}

#menu_toggle span:nth-child(4) {
  bottom: 12px;
}

#menu_toggle.open span:nth-child(3) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#menu_toggle.open span:nth-child(1) {
  top: 20.5px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#menu_toggle.open span:nth-child(2) {
  top: 20.5px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#menu_toggle.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Navigation bar -->
<div class="container-fluid main-nav">

  <div class="container">

    <div class="row">

      <div class="col-lg-9 col-md-10 mx-auto">

        <a class="logotype" href="home">

          <h1>Logo</h1>

        </a>

        <div id="menu_toggle">
          <span></span>
          <span></span>
          <span></span>
        </div>

      </div>

    </div>

  </div>

</div>

<p>Det finns många olika varianter av Lorem Ipsum, men majoriteten av dessa har ändrats på någotvis. Antingen med inslag av humor, eller med inlägg av ord som knappast ser trovärdiga ut. Skall man använda långa stycken av Lorem Ipsum bör man försäkra sig
  om att det inte gömmer sig något pinsamt mitt i texten. Lorem Ipsum-generatorer på internet tenderar att repetera Lorem Ipsum-texten styckvis efter behov, något som gör denna sidan till den första riktiga Lorem Ipsum-generatorn på internet. Den använder
  ett ordförråd på över 200 ord, kombinerat med ett antal meningsbyggnadsstrukturer som tillsamman genererar Lorem Ipsum som ser ut som en normal mening. Lorem Ipsum genererad på denna sidan är därför alltid fri från repetitioner, humorinslag, märkliga
  ordformationer osv.</p>

<p>Det finns många olika varianter av Lorem Ipsum, men majoriteten av dessa har ändrats på någotvis. Antingen med inslag av humor, eller med inlägg av ord som knappast ser trovärdiga ut. Skall man använda långa stycken av Lorem Ipsum bör man försäkra sig
  om att det inte gömmer sig något pinsamt mitt i texten. Lorem Ipsum-generatorer på internet tenderar att repetera Lorem Ipsum-texten styckvis efter behov, något som gör denna sidan till den första riktiga Lorem Ipsum-generatorn på internet. Den använder
  ett ordförråd på över 200 ord, kombinerat med ett antal meningsbyggnadsstrukturer som tillsamman genererar Lorem Ipsum som ser ut som en normal mening. Lorem Ipsum genererad på denna sidan är därför alltid fri från repetitioner, humorinslag, märkliga
  ordformationer osv.</p>
<p>Det finns många olika varianter av Lorem Ipsum, men majoriteten av dessa har ändrats på någotvis. Antingen med inslag av humor, eller med inlägg av ord som knappast ser trovärdiga ut. Skall man använda långa stycken av Lorem Ipsum bör man försäkra sig
  om att det inte gömmer sig något pinsamt mitt i texten. Lorem Ipsum-generatorer på internet tenderar att repetera Lorem Ipsum-texten styckvis efter behov, något som gör denna sidan till den första riktiga Lorem Ipsum-generatorn på internet. Den använder
  ett ordförråd på över 200 ord, kombinerat med ett antal meningsbyggnadsstrukturer som tillsamman genererar Lorem Ipsum som ser ut som en normal mening. Lorem Ipsum genererad på denna sidan är därför alltid fri från repetitioner, humorinslag, märkliga
  ordformationer osv.</p>

＆＃13;

事先谢谢！埃里克

导航栏向下隐藏，向上滚动显示在Safari中无法正常工作

0 个答案: