javascript 自动隐藏导航栏

📌 相关文章

📜 javascript 自动隐藏导航栏 - Javascript (1)

📅 最后修改于: 2023-12-03 15:31:45.555000 🧑 作者: Mango

在许多网站中，导航栏通常占据页面的一部分，但对于移动设备和小屏幕设备，导航栏却可能占据过多的空间，影响用户的浏览体验。因此，在针对这些设备进行的网站设计中，我们常常需要自动隐藏导航栏，使用户可以更方便地查看内容。

如何实现自动隐藏导航栏呢？我们可以使用Javascript来实现这个功能。具体方法是：当用户向下滚动页面时，导航栏隐藏，当用户向上滚动页面时，导航栏再次显示。

实现过程

首先，我们需要一个HTML页面，其中包含导航栏和内容区域。导航栏可以使用<nav>标签来实现，内容区域可以使用<div>标签来实现。例如：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>
<div>
  <p>这里是内容区域</p>
</div>

接下来，我们需要为导航栏添加一个CSS样式，使其固定在页面顶部，并设置高度和宽度，例如：
```
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #333;
  color: #fff;
}
```

现在，我们需要编写一个Javascript函数来监测滚动事件，并根据滚动方向来判断是否应该隐藏导航栏。例如：

var prevScrollpos = window.pageYOffset;

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

最后，我们可以将这个Javascript函数放在<script>标签中，并将整个HTML代码保存为一个文件。当用户在浏览器中打开这个文件时，导航栏将会自动隐藏。

完整代码

完整的HTML代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>自动隐藏导航栏</title>
	<style>
	nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 50px;
		background-color: #333;
		color: #fff;
	}
	</style>
</head>
<body>
	<nav>
		<ul>
			<li><a href="#">首页</a></li>
			<li><a href="#">关于我们</a></li>
			<li><a href="#">联系我们</a></li>
		</ul>
	</nav>
	<div>
		<p>这里是内容区域</p>
		<p>这里是内容区域</p>
		<p>这里是内容区域</p>
		<p>这里是内容区域</p>
		<p>这里是内容区域</p>
		<p>这里是内容区域</p>
		<p>这里是内容区域</p>
		<p>这里是内容区域</p>
		<p>这里是内容区域</p>
		<p>这里是内容区域</p>
	</div>
	<script>
	var prevScrollpos = window.pageYOffset;

	window.onscroll = function() {
		var currentScrollPos = window.pageYOffset;
		if (prevScrollpos > currentScrollPos) {
			document.querySelector("nav").style.top = "0";
		} else {
			document.querySelector("nav").style.top = "-50px";
		}
		prevScrollpos = currentScrollPos;
	}
	</script>
</body>
</html>

Javascript 自动隐藏导航栏

实现过程

完整代码

参考资料