資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用CSS和JavaScript在向下滾動時隱藏導航選單？
要使用CSS和JavaScript在向下滾動時隱藏導航選單，使用者應該具備Javascript 條件語句和CSS的基礎知識。我們將使用HTML建立導航選單，使用CSS設定導航選單的樣式，並使用Javascript在向下滾動時隱藏導航選單。
我們有一個帶有文字內容的導航選單，我們的任務是在向下滾動時隱藏導航選單。在這篇文章中，我們將實現以下步驟，以使用CSS和JavaScript在向下滾動時隱藏導航選單
使用HTML建立導航選單的結構
- 我們在HTML程式碼中使用了兩個div標籤和四個錨標籤。
- 帶有class nav的div元素建立了導航選單的結構，其中包含使用錨標籤建立的四個選項。
- 帶有class para的div元素編寫HTML內容，向下滾動時將隱藏導航選單。
以下是上述步驟的HTML實現
<div id="nav">
<a href="#">Home</a>
<a href="#">Tutorials</a>
<a href="#">Tutorix</a>
<a href="#">Contact</a>
</div>
<div class="para">
<p>
CSS is the language used to design the web
pages or specifying the presentation of a
document written in a markup language like
HTML.
</p>
<p>
CSS helps web developers to control
the layout and other visual aspects of
the web pages.
</p>
<p>
CSS stands for Cascading Style
Sheets, it is a simple design language
intended to simplify the process of making
web pages presentable using CSS properties.
</p>
<p>
CSS specify how an HTML element should be
displayed on the web page. If you think of
the human body as a web page then CSS is
styling part of the body. Like color of
the eyes, size of the nose, skin tone, etc.
</p>
<p>
This CSS tutorial is designed for aspiring
Web Designers and Developers from basics
to advance. CSS knowledge is must whoever
wants to be a web developer, there are a
lot of CSS frameworks like Bootstrap,
Tailwind CSS, etc. But having CSS knowledge
is must as a web developer.
</p>
</div>
使用CSS設定導航選單的樣式
- 我們使用了nav ID來設計導航選單，它將背景顏色設定為綠色，使用position和top屬性將導航選單固定在頂部，並在隱藏和顯示導航選單時新增過渡。
- 我們使用了#nav a選擇器，它選擇導航選單選項並設定其字體系列，我們使用了float屬性，它從左側水平排列選單選項，設定填充和字型大小。
- 將滑鼠懸停在導航選單選項上時，我們將其文字裝飾設定為下劃線。
- 最後，我們為書面內容設定了頂部邊距、填充、字型大小和高度。
以下是上述步驟的CSS實現
#nav {
background-color: #04af2f;
position: fixed;
top: 0;
width: 100%;
display: block;
transition: top 0.3s;
}
#nav a {
font-family: Verdana, sans-serif;
float: left;
display: block;
color: #f2f2f2;
padding: 10px;
font-size: 16px;
text-decoration: none;
}
#nav a:hover {
text-decoration: underline;
}
.para {
padding: 15px;
margin-top: 30px;
height: 1600px;
font-size: 20px;
}
使用JavaScript隱藏導航選單
- 我們使用了兩個變數 prevState 和 currentState，其中 prevState 是當前垂直滾動位置，currentState 在使用者滾動時更新。
- 我們使用了在滾動時執行的事件處理程式。
- 我們使用了簡單的if-else條件語句，其中prevState > currentState表示向上滾動，prevState < currentState表示向下滾動。
- 向上滾動時，導航選單使用top:0;設定在頂部，向下滾動時，導航選單使用CSS top屬性設定為負值，從而隱藏導航選單。
以下是上述步驟的實現
let prevState = window.pageYOffset;
window.onscroll = function () {
let currentState = window.pageYOffset;
if (prevState > currentState) {
document.getElementById("nav").
style.top = "0";
}
else {
document.getElementById("nav").
style.top = "-50px";
}
prevState = currentState;
}
完整示例程式碼
以下是使用CSS和JavaScript在向下滾動時隱藏導航選單的完整示例程式碼。
<!DOCTYPE html>
<html>
<head>
<title>
To hide a navigation menu on scroll
down with CSS and JavaScript
</title>
<style>
#nav {
background-color: #04af2f;
position: fixed;
top: 0;
width: 100%;
display: block;
transition: top 0.3s;
}
#nav a {
font-family: Verdana, sans-serif;
float: left;
display: block;
color: #f2f2f2;
padding: 10px;
font-size: 16px;
text-decoration: none;
}
#nav a:hover {
text-decoration: underline;
}
.para {
padding: 15px;
margin-top: 30px;
height: 1600px;
font-size: 20px;
}
</style>
</head>
<body>
<div id="nav">
<a href="#">Home</a>
<a href="#">Tutorials</a>
<a href="#">Tutorix</a>
<a href="#">Contact</a>
</div>
<div class="para">
<p>
CSS is the language used to design the web
pages or specifying the presentation of a
document written in a markup language like
HTML.
</p>
<p>
CSS helps web developers to control
the layout and other visual aspects of
the web pages.
</p>
<p>
CSS stands for Cascading Style
Sheets, it is a simple design language
intended to simplify the process of making
web pages presentable using CSS properties.
</p>
<p>
CSS specify how an HTML element should be
displayed on the web page. If you think of
the human body as a web page then CSS is
styling part of the body. Like color of
the eyes, size of the nose, skin tone, etc.
</p>
<p>
This CSS tutorial is designed for aspiring
Web Designers and Developers from basics
to advance. CSS knowledge is must whoever
wants to be a web developer, there are a
lot of CSS frameworks like Bootstrap,
Tailwind CSS, etc. But having CSS knowledge
is must as a web developer.
</p>
</div>
<script>
let prevState = window.pageYOffset;
window.onscroll = function () {
let currentState = window.pageYOffset;
if (prevState > currentState) {
document.getElementById("nav").
style.top = "0";
} else {
document.getElementById("nav").
style.top = "-50px";
}
prevState = currentState;
}
</script>
</body>
</html>
結論
在這篇文章中，我們學習並理解了如何使用CSS和JavaScript在向下滾動時隱藏導航選單。我們使用HTML和CSS建立和設定導航選單的樣式，同時使用JavaScript新增滾動事件監聽器，該監聽器在向下滾動時隱藏導航選單，並在向上滾動時重新顯示。
更新於：2024年8月19日
5000+ 次瀏覽
廣告