数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 CSS 和 JavaScript 在滚动时调整导航栏大小？
本文将讨论如何使用 CSS 和 JavaScript 在滚动时调整导航栏大小。
导航栏包含网站中存在的元素列表；包括浏览网站的链接。它通常是访问者访问网站时的第一个停靠点，他们寻求指导以浏览网站。
调整大小与隐藏和显示导航相同。在这里，我们只需要使用 JavaScript 增加导航栏的填充和大小。
在这个示例中，我们正在创建一个显示“导航栏”的网页。一个包含 4 个选项的菜单进入当前页面。
Example.html
创建一个HTML文件，在其中我们将定义页面的结构（视图）。在这个例子中，使用 HTML 代码，我们正在创建当前页面，其中包含所需的文本、导航栏和菜单的空导航链接。
<body>
<!-- HTML CODE -->
<div id="navbar">
<a href="#default" id="logo">€€§§±</a>
<div id="navbar-right">
<a class="active" href="#home">Home</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
</div>
<div style="margin-top:150px;padding:15px 15px 2500px;font-size:30px; font-family: Verdana, Geneva, Tahoma, sans-serif;">
<p class="para"><b>This example demonstrates how to shrink a navigation bar when the user starts to scroll the page.</b></p>
<p class="para">to show the effect scroll down and remove the effect scroll up.</p>
</div>
Example.css
添加 css 样式以在可滑动导航栏上提供背景和悬停效果，以获得更好的外观。在这个示例中，我们正在设置导航栏链接的样式，如果我们悬停在链接上，背景颜色将发生变化，并且还在首页链接上添加了活动类。
<style>
/*styling*/
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#navbar {
overflow: hidden;
background-color: #5f5151;
padding: 50px 10px;
transition: 0.5s;
position: fixed;
width: 100%;
top: 0;
z-index: 1;
}
#navbar a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 15px;
line-height: 25px;
border-radius: 4px;
}
#navbar #logo {
font-size: 35px;
font-weight: bold;
transition: 0.4s;
color: white;
}
#navbar a:hover {
background-color: rgb(94, 250, 211);
color: black;
}
#navbar a.active {
background-color: rgb(31, 214, 150);
color: rgb(11, 10, 10);
}
#navbar-right {
float: right;
}
@media screen and (max-width: 580px) {
#navbar {
padding: 10px 10px;
}
#navbar a {
float: left;
display: block;
text-align: left;
}
#navbar-right {
float: right;
}
.para {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: small;
}
}
</style>
Example.js
在这个示例中，我们正在添加滚动效果，如果页面滚动超过或等于 80，则导航栏将变小，并且内容将从页面中隐藏。
观察以下javascript代码以更好地理解。
<script>
// When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementById("navbar").style.padding = "10px 10px";
document.getElementById("logo").style.fontSize = "20px";
} else {
document.getElementById("navbar").style.padding = "30px 10px";
document.getElementById("logo").style.fontSize = "30px";
}
}
</script>
完整示例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*styling*/
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#navbar {
overflow: hidden;
background-color: #5f5151;
padding: 50px 10px;
transition: 0.5s;
position: fixed;
width: 100%;
top: 0;
z-index: 1;
}
#navbar a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 15px;
line-height: 25px;
border-radius: 4px;
}
#navbar #logo {
font-size: 35px;
font-weight: bold;
transition: 0.4s;
color: white;
}
#navbar a:hover {
background-color: rgb(94, 250, 211);
color: black;
}
#navbar a.active {
background-color: rgb(31, 214, 150);
color: rgb(11, 10, 10);
}
#navbar-right {
float: right;
}
@media screen and (max-width: 580px) {
#navbar {
padding: 10px 10px;
}
#navbar a {
float: left;
display: block;
text-align: left;
}
#navbar-right {
float: right;
}
.para {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: small;
}
}
</style>
</head>
<body>
<!-- HTML CODE -->
<div id="navbar">
<a href="#default" id="logo">€€§§±</a>
<div id="navbar-right">
<a class="active" href="#home">Home</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
</div>
<div style="margin-top:150px;padding:15px 15px 2500px;font-size:30px; font-family: Verdana, Geneva, Tahoma, sans-serif;">
<p class="para"><b>This example demonstrates how to shrink a navigation bar when the user starts to scroll the page.</b></p>
<p class="para">to show the effect scroll down and remove the effect scroll up.</p>
</div>
<script>
// When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementById("navbar").style.padding = "10px 10px";
document.getElementById("logo").style.fontSize = "20px";
} else {
document.getElementById("navbar").style.padding = "30px 10px";
document.getElementById("logo").style.fontSize = "30px";
}
}
</script>
</body>
</html>
更新于： 2022-12-19
3K+ 浏览量
广告