資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用CSS建立滾動固定導航欄？
固定導航欄使用`position`屬性固定在網頁上，即使滾動頁面也保持不變，始終貼上在頂部。如今許多網站的導航欄都是固定在頂部的。也使用了`top`屬性。透過指定CSS `position`屬性，我們可以使用CSS建立一個固定導航欄。
CSS中`position`屬性的語法如下：
Selector {
position: /*value*/;
}
上面，`position`屬性的值設定為`fixed`以設定固定導航欄。
設定導航欄容器
首先，為導航選單設定一個div。使用<a>元素設定菜單鏈接：
<div id="navigation-bar"> <a class="active" href="#">Logo</a> <a href="#">SignUp</a> <a href="#">SignIn</a> <a href="#">More</a> </div>
定位菜單鏈接
使用`float`屬性將菜單鏈接浮動到左側。`display`屬性設定為`block`：
a {
float: left;
display: block;
margin-left: 2%;
padding: 2% 4%;
text-align: center;
color: black;
text-decoration: none;
font-size: 1.2em;
border: 0.5px ridge red;
}
設定內容
建立一個容器。在其中，內容設定在<p>中。此外，使用<img>在容器中設定影像：
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus ante quis odio rhoncus, sit amet porta nunc venenatis. Vivamus eu ex et risus vehicula semper eu eu elit. Aliquam tempor rutrum neque sit amet aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras non eros ex. Suspendisse placerat tincidunt tortor a semper. Etiam molestie justo ac sapien auctor maximus. Etiam ut ante sollicitudin, tempor mauris nec, malesuada purus. Nunc malesuada sem sed fermentum eleifend. Cras ultrices velit eu blandit lobortis.
</p>
<img src="https://images.unsplash.com/photo-1612305876291- c369fea489b3?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=800&ixlib=rb1.2.1&q=80&w=600" />
</div>
固定選單
要定位選單，請使用`position`屬性並將其設定為`fixed`。選單的寬度設定為100%：
.sticky {
position: fixed;
top: 0;
width: 100%;
background-color: yellow;
}
設定指令碼以定位導航欄
滾動時，將呼叫`sticker()`函式。在`sticker`函式下，如果頁面的`YOffset`高於`offsetTop`值，則啟用粘性選單：
<script>
let nav = document.getElementById("navigation-bar");
let sticky = nav.offsetTop;
window.onscroll = function() {sticker()};
function sticker() {
if (window.pageYOffset >= sticky) {
nav.classList.add("sticky")
} else {
nav.classList.remove("sticky");
}
}
</script>
示例
以下是使用CSS `position`屬性建立滾動固定導航欄的示例：
<!DOCTYPE html>
<html>
<head>
<style>
#navigation-bar {
overflow: hidden;
box-shadow: inset 0 0 20px green;
}
a {
float: left;
display: block;
margin-left: 2%;
padding: 2% 4%;
text-align: center;
color: black;
text-decoration: none;
font-size: 1.2em;
border: 0.5px ridge red;
}
a:hover {
box-shadow: inset 0 0 14px red;
font-size: 1.6em;
}
.content {
background-color: coral;
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
background-color: yellow;
}
.sticky + .content {
padding-top: 80px;
}
</style>
</head>
<body>
<div class="content"></div>
<div id="navigation-bar">
<a class="active" href="#">Logo</a>
<a href="#">SignUp</a>
<a href="#">SignIn</a>
<a href="#">More</a>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus ante quis odio rhoncus, sit amet porta nunc venenatis. Vivamus eu ex et risus vehicula semper eu eu elit. Aliquam tempor rutrum neque sit amet aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras non eros ex. Suspendisse placerat tincidunt tortor a semper. Etiam molestie justo ac sapien auctor maximus. Etiam ut ante sollicitudin, tempor mauris nec, malesuada purus. Nunc malesuada sem sed fermentum eleifend. Cras ultrices velit eu blandit lobortis.
</p>
<img src="https://images.unsplash.com/photo-1612305876291-c369fea489b3?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=800&ixlib=rb1.2.1&q=80&w=600" />
</div>
<script>
let nav = document.getElementById("navigation-bar");
let sticky = nav.offsetTop;
window.onscroll = function() {sticker()};
function sticker() {
if (window.pageYOffset >= sticky) {
nav.classList.add("sticky")
} else {
nav.classList.remove("sticky");
}
}
</script>
</body>
</html>
更新於：2023-12-14
4K+ 瀏覽量
廣告