时间戳

首页 > 解决方案 > Safari/Iphone 弹跳效果在 JavaScript 代码中触发向下滚动功能，使导航栏消失

javascript - Safari/Iphone 弹跳效果在 JavaScript 代码中触发向下滚动功能，使导航栏消失

问题描述

我使用 HTML 和 CSS 从头开始​​编写个人网站，但我希望导航栏在用户向下滚动时消失，然后在用户向上滚动时重新出现（尤其是在移动设备上）。我不得不使用一些 JavaScript 来实现这一点，但它不是我非常了解的语言。一切都在 Chrome（桌面）上完美运行，但由于 Iphone 产生的反弹效果，当您滚动到页面顶部时它会消失。

我有点知道我想做什么来解决这个问题，但是由于我对 JavaScript 几乎一无所知，所以我无法实现它。基本上我想让我写的 JS 代码只适用于页面为 0px 或更大的情况。由于 Iphone 允许用户在弹跳效果发挥作用之前滚动到高于页面的位置，因此我假设我们暂时处于负显示像素中。

澄清一下，反弹效果是指当您向上滚动到页面顶部并松开时，页面顶部“弹回”到屏幕顶部，触发我的 JS 代码中的向下滚动功能，从而使当用户位于页面顶部时，导航栏消失。

'''JavaScript

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("NavBar").style.top = "0";
  } else {
    document.getElementById("NavBar").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}

'''

'''HTML

<header id="NavBar">

  <img  src="" height="50px" alt="" class="logo" />
  <input type="checkbox" id="nav-checkbox" class="nav-checkbox"> 

  <nav>
    <ul>
      <a href=""><li class="nav-home"><i class="fas fa-home"></i></li></a>
      <a href=""><li class="nav-portfolio">Portfolio</li></a>
      <a href=""><li class="nav-blog">Blog</li></a>
      <a href=""><li class="nav-about">About</li></a>
    </ul>
  </nav>

  <label for="nav-checkbox" class="hamburger">
    <i class="fas fa-bars"></i>
  </label>

  <script src="script.js"></script>

</header>

'''

'''CSS

header{
  background   :   var(--background)   ;
  text-align   :   center              ;
  position     :   fixed               ;
  top          :   0                   ;
  width        :   100%                ;
  height       :   50px                ;
  z-index      :   999                 ;
  transition   :   top .35s            ;
}


nav {
  background                  :   var(--background)             ;
  position                    :   absolute                      ;
  display                     :   flex                          ;
  justify-content             :   center                        ;
  width                       :   250px                         ;
  right                       :   0                             ;
  top                         :   100%                          ;
  border-bottom-left-radius   :   75px                          ;
  transform                   :   scale(1, 0)                   ;
  transform-origin            :   top                           ;
  transition                  :   transform 200ms ease-in-out   ;
}

'''

标签： javascripthtmlcss

解决方案

iOS 在滚动到顶部时做了一件奇怪的事情，就是让页面变大。这是我对同一问题的解决方案。

您需要添加|| window.pageYOffset < 50到您的 if 语句中。

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos ||  window.pageYOffset < 50) {
    document.getElementById("NavBar").style.top = "0";
  } else {
    document.getElementById("NavBar").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}

推荐阅读