資料結構
網路
關係資料庫管理系統
作業系統
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+ 瀏覽量
廣告