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