用不到 10 行 JavaScript 代码，在向下滚动时隐藏导航栏；

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

你肯定在一些网站上见过这种效果，当你向下滚动页面时，导航栏会自动隐藏，向上滚动页面时导航栏会自动重新出现。

这是我用 10 行 JavaScript 代码实现的基本页面。

 lastScrollTop;
navbar = document.getElementById('navbar');
window.addEventListener('scroll',function(){
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  if(scrollTop > lastScrollTop){
    navbar.style.top='-80px';
  }
  else{
    navbar.style.top='0';
  }
  lastScrollTop = scrollTop;
});

它的工作原理

这里使用 JavaScript 来改变导航栏的位置。

首先，我们创建一个变量来存储页面的位置；

然后我们使用以下方法获取滚动位置：window.pageYOffset或者对于某些浏览器，使用“document.documentElement.scrollTop”；

然后检查页面是向上滚动还是向下滚动；

然后将滚动值保存到变量中；

每次滚动页面时都会执行此操作，因为所有这些都位于一个EventListener.

查看 CodePen 上的 JS 代码，会更清楚。

也请看看我的其他帖子。

让你的网站拥有磨砂玻璃效果。看看怎么做？

Areeb ur Rub ・ 2021年5月20日

#css #webdev #showdev #tutorial

关注我获取更多信息

Areeb ur Rub跟随

Arduino | Python | TypeScript | Next.js | 热爱学习和创造