数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 CSS 创建粘性元素？
在网页上，我们可以轻松创建一个元素并将其固定，即该特定元素在网页滚动时仍将保持固定。这可使用值为 sticky 的 position 属性实现。
为粘性元素创建 div
设置父级 div 容器 −
<div class="sticky">Sticky Element</div>
<p style="font-size: 35px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit vel dolore delectus esse consequatur at nulla, consequuntur sint quas ea. Incidunt, ex. Consequatur ipsa earum veritatis fugiat iusto, doloremque sunt beatae quaerat laboriosam nemo soluta quidem porro quia. Dolore reprehenderit cum voluptatibus eius assumenda ipsam tenetur asperiores magni aliquid eligendi doloribus quidem ipsa et praesentium provident molestias quaerat laboriosam, veniam aspernatur repellendus. Debitis sapiente, odit iste voluptatibus nesciunt veritatis incidunt mollitia nostrum, vitae suscipit iusto molestias consequuntur rem facere perspiciatis ad! Ratione reiciendis asperiores aperiam vitae facilis accusantium non aliquid, facere cupiditate reprehenderit tempore veritatis eum accusamus omnis tempora quos!
</p>
定位容器
容器使用具有 sticky 值的 position 属性进行粘性定位。将 top 属性设置为值 0 使容器在网页滚动时出现在顶部 −
div.sticky {
position: sticky;
top: 0;
background-color: rgb(52, 21, 110);
color: white;
padding: 50px;
font-size: 20px;
}
产生滚动
height 属性用于网页文档，以便在网页滚动时出现滚动 −
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 0px;
padding: 0px;
height: 150vh;
}
示例
要使用 CSS 创建粘性元素，代码如下 −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 0px;
padding: 0px;
height: 150vh;
}
div.sticky {
position: sticky;
top: 0;
background-color: rgb(52, 21, 110);
color: white;
padding: 50px;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Sticky Element Example</h1>
<h2>Random Header Text</h2>
<h2>Randorm Header Text</h2>
<div class="sticky">Sticky Element</div>
<p style="font-size: 35px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit vel dolore delectus esse consequatur at nulla, consequuntur sint quas ea. Incidunt, ex. Consequatur ipsa earum veritatis fugiat iusto, doloremque sunt beatae quaerat laboriosam nemo soluta quidem porro quia. Dolore reprehenderit cum voluptatibus eius assumenda ipsam tenetur asperiores magni aliquid eligendi doloribus quidem ipsa et praesentium provident molestias quaerat laboriosam, veniam aspernatur repellendus. Debitis sapiente, odit iste voluptatibus nesciunt veritatis incidunt mollitia nostrum, vitae suscipit iusto molestias consequuntur rem facere perspiciatis ad! Ratione reiciendis asperiores aperiam vitae facilis accusantium non aliquid, facere cupiditate reprehenderit tempore veritatis eum accusamus omnis tempora quos!
</p>
</body>
</html>
更新于：2023 年 12 月 14 日
243 次浏览
广告