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

问题描述 投票:1回答:1

我已经使用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   ;
}

'''

javascript html css
1个回答
1
投票

iOS滚动到顶部时,做的事情使页面变大。这是我对同一问题的解决方案。

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

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;
}
© www.soinside.com 2019 - 2024. All rights reserved.