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

---

“”“

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;
}

var-prevScrollpos=window.pageYOffset；
window.onscroll=函数（）{
var currentScrollPos=window.pageYOffset；
如果（prevScrollpos>currentScrollPos | | window.pageYOffset<50）{
document.getElementById（“NavBar”）.style.top=“0”；
}否则{
document.getElementById（“NavBar”）.style.top=“-50px”；
}
prevScrollpos=当前ScrollPos；
}

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   ;
}

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;
}