如何使用 CSS 和 JavaScript 在向下滚动时隐藏导航菜单?
javascriptweb developmentfront end technology更新于 2024/6/15 3:11:00
我们已经了解了如何在向下滚动时创建下拉导航栏。在本文中，我们将学习如何使用 CSS 和 JavaScript 在向下滚动时隐藏导航菜单。
导航栏包含您网站中存在的元素列表；包括用于浏览网站的链接。它通常是访问网站并寻求指导以浏览网站的用户的第一个停靠点。
在 CSS 中
#navlist{top:0;}
在 JavaScript 中
document.getElementById("navlist").style.top = "-60px";
document.getElementById("navlist").style.top = "0";
要在滚动后隐藏导航菜单，您需要使用 HTML、CSS 和 JavaScript。这种滑动导航栏在网站上看起来很有吸引力，通过使用 javascript，您可以轻松地使导航栏在用户向下滚动时可滑动。
在此示例中，我们正在创建一个在向下滚动页面时显示"可隐藏导航栏"的网页。当前页面中弹出一个包含 4 个选项的菜单。
Example.html
创建一个 HTML 文件，我们将在其中定义页面的结构(视图)。在此示例中，使用 HTML 代码，我们正在创建当前页面，其中包含所需文本、可滑动导航栏和菜单的空导航链接。
<body>
<!-- heading -->
<article>
<h1 style="color: rgb(0, 128, 85)">Tutorialspoint Easy to Learn</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ea impedit a harum illo excepturi consectetur quisquam, voluptatum, distinctio sit eius et dolore quae eos optio dolorum. Esse pariatur similique voluptates?
</p>
</article>
<!-- Navbar items -->
<div id="navlist">
<a href="#">Home</a>
<a href="#">Tutorials</a>
<a href="#">AboutUs</a>
<a href="#">Contact Us</a>
</div>
<!-- for creating scroll -->
<div class="scrollable" style="padding: 15px 15px 4500px"></div>
Example.css
添加 css 样式 以在可滑动导航栏上提供背景和悬停效果，从而获得更好的外观。在此示例中，我们正在设置导航栏的链接样式，如果我们将鼠标悬停在链接上，背景颜色将会改变。
<style>
/* styling article tag component */
article {
position: fixed;
margin-left: 10px;
margin-top: 15px;
}
/* styling navlist */
#navlist {
background-color: #0074d9;
position: fixed;
left: 45%;
top: 0;
width: auto;
display: block;
transition: top 0.3s;
}
/* styling navlist anchor element */
#navlist a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 13px;
}
/* hover effect of navlist anchor element */
#navlist a:hover {
background-color: white;
color: black;
}
/*media query */
@media screen and (max-width: 600px) {
#navlist {
background-color: #0074d9;
position: fixed;
left: 30%;
top: -70px;
width: auto;
display: block;
transition: top 0.3s;
}
}
</style>
Example.js
使用 JavaScript，我们可以在页面上执行验证和处理事件。在此示例中，我们添加了滚动效果，如果页面滚动大于或等于 20，则可滑动导航栏将从页面中隐藏。如果滚动小于 20，则可滑动导航栏将在页面上可见。
<script>
// When the user scrolls down then
// slide down the navbar
window.onscroll = function() {
scroll();
};
function scroll() {
if (
document.body.scrollTop > 20 ||
document.documentElement.scrollTop > 20
) {
document.getElementById("navlist").style.top = "-60px";
} else {
document.getElementById("navlist").style.top = "0";
}
}
</script>
完整示例
<!DOCTYPE html>
<html>
<head>
<title>
Slide Down a Navigation Bar on Scroll using HTML CSS and JavaScript
</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
/* styling article tag component */
article {
position: fixed;
margin-left: 10px;
margin-top: 15px;
}
/* styling navlist */
#navlist {
background-color: #0074d9;
position: fixed;
left: 45%;
top: 0;
width: auto;
display: block;
transition: top 0.3s;
}
/* styling navlist anchor element */
#navlist a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 13px;
}
/* hover effect of navlist anchor element */
#navlist a:hover {
background-color: white;
color: black;
}
/*media query */
@media screen and (max-width: 600px) {
#navlist {
background-color: #0074d9;
position: fixed;
left: 30%;
top: -70px;
width: auto;
display: block;
transition: top 0.3s;
}
}
</style>
</head>
<body>
<!-- heading -->
<article>
<h1 style="color: rgb(0, 128, 85)">Tutorialspoint Easy to Learn</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ea impedit a harum illo excepturi consectetur quisquam, voluptatum, distinctio sit eius et dolore quae eos optio dolorum. Esse pariatur similique voluptates?
</p>
</article>
<!-- Navbar items -->
<div id="navlist">
<a href="#">Home</a>
<a href="#">Tutorials</a>
<a href="#">AboutUs</a>
<a href="#">Contact Us</a>
</div>
<!-- for creating scroll -->
<div class="scrollable" style="padding: 15px 15px 4500px"></div>
<script>
// When the user scrolls down then
// slide down the navbar
window.onscroll = function() {
scroll();
};
function scroll() {
if (
document.body.scrollTop > 20 ||
document.documentElement.scrollTop > 20
) {
document.getElementById("navlist").style.top = "-60px";
} else {
document.getElementById("navlist").style.top = "0";
}
}
</script>
</body>
</html>
