数据结构
网络
关系数据库管理系统 (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+ 浏览量
广告