css中position:sticky 粘性定位詳解
發(fā)布時間：2024-02-28 17:14:46 作者：卿本無憂 
我要評論
我要評論粘性定位的元素是依賴于用戶的滾動，在position:relative與position:fixed定位之間切換，這篇文章給大家介紹css中position:sticky 粘性定位的相關(guān)知識，感興趣的朋友跟隨小編一起看看吧
1、什么是粘性定位？
粘性定位它基于用戶的滾動位置來定位。
粘性定位的元素是依賴于用戶的滾動，在 position:relative 與 position:fixed 定位之間切換。
它的行為就像 position:relative; 而當(dāng)頁面滾動超出目標(biāo)區(qū)域時，它的表現(xiàn)就像 position:fixed;，它會固定在目標(biāo)位置。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix
例如：
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 10px;
}設(shè)置了以上元素，在屏幕范圍（viewport）視口滾動到元素top距離小于10px之前，div為相對定位。之后元素將固定在與頂部距離10px的位置，直到viewport視口回滾到10px以內(nèi)。
特點：
- 元素定位表現(xiàn)為在跨越特定閾值前為相對定位，之后為固定定位。
- 這個特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。
- 偏移值不會影響任何其他元素的位置。該值總是創(chuàng)建一個新的層疊上下文（stacking context）。
- sticky元素會固定在離它最近的一個擁有滾動機(jī)制的祖先上，如果祖先元素都不可以滾動，那么是相對于viewport來計算元素的偏移量。
2、原理
視口元素：顯示內(nèi)容的區(qū)域。會設(shè)置寬高。一般會設(shè)置 overflow:hidden。
容器元素：離 sticky 元素最近的能滾動的祖先元素。
粘性約束元素：粘性定位的父元素。有時也會出現(xiàn)粘性約束元素就是容器元素的情況。
sticky 元素：設(shè)置了 position: sticky; 的元素。
滾動時，sticky 元素設(shè)置的 left, right, top, bottom 的值相對的是容器元素。當(dāng)粘性約束元素滾出視口時，sticky 元素也會滾出視口。
3、可能存在的不生效的情況
3.1 未指定 top, right, top 和 bottom 中的任何一個值
此時，設(shè)置 position: sticky 相當(dāng)于設(shè)置 position: relative。
要生效，要指定 top, right, top 或 bottom 中的任何一個值。
3.2 垂直滾動時，粘性約束元素高度小于等于 sticky 元素高度
當(dāng)粘性約束元素滾出視口時，sticky 元素也會滾出視口。粘性約束元素比 sticky 元素還小，sticky 元素沒有顯示固定定位狀態(tài)的機(jī)會。
水平滾動時，粘性約束元素寬度小于等于 sticky 元素寬度時，也不會生效。
3.3 粘性約束元素和容器元素之間存在 overflow: hidden 的元素
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.viewport {
width: 375px;
height: 300px;
background-color: pink;
padding: 20px;
overflow: auto;
}
.container {
height: 500px;
background-color: skyblue;
padding: 20px;
}
.box {
height: 300px;
background-color: lightgoldenrodyellow;
padding: 20px;
}
.stick-elem {
height: 50px;
background-color: seagreen;
padding: 20px;
position: -webkit-sticky;
position: sticky;
top: 50px;
}
</style>
</head>
<body>
<!-- 視口元素 -->
<div class="viewport">
<h3>視口元素</h3>
<!-- 容器元素 -->
<div class="container">
<h3>容器元素</h3>
<div style="overflow: hidden;">
<!-- 粘性約束元素 -->
<div class="box">
<h3>粘性約束元素</h3>
<!-- sticky 元素 -->
<div class="stick-elem">
<h3>sticky 元素</h3>
</div>
</div>
</div>
</div>
</div>
</body>
</html>4、應(yīng)用示例
4.1 頭部固定
頭部導(dǎo)航欄開始時相對定位頂部，當(dāng)頁面元素發(fā)生滾動時，變?yōu)楹?nbsp;fixed 類似的固定定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.main-container {
max-width: 375px;
height: 300px;
overflow: auto;
}
.main-header {
height: 50px;
background: pink;
position: -webkit-sticky;
position: sticky;
top: 0;
}
.main-content {
min-height: 500px;
background: skyblue;
}
.main-footer {
height: 50px;
background: seagreen;
}
</style>
</head>
<body>
<main class="main-container">
<header class="main-header">HEADER</header>
<div class="main-content">MAIN CONTENT</div>
<footer class="main-footer">FOOTER</footer>
</main>
</body>
</html>4.2 頁腳固定
頁腳固定效果，開始時頁腳為固定定位效果，當(dāng)頁面滾動超過頁腳時，頁腳定位效果變?yōu)橄鄬Χㄎ恍Ч?，可用于顯示一些底部信息或廣告。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.main-container {
max-width: 375px;
height: 300px;
overflow: auto;
}
.main-header {
height: 50px;
background: pink;
position: -webkit-sticky;
}
.main-content {
min-height: 500px;
background: skyblue;
}
.main-footer {
height: 50px;
background: seagreen;
position: sticky;
bottom: 0;
}
</style>
</head>
<body>
<main class="main-container">
<header class="main-header">HEADER</header>
<div class="main-content">MAIN CONTENT</div>
<footer class="main-footer">FOOTER</footer>
</main>
</body>
</html>4.3 側(cè)邊欄固定
當(dāng)頁面產(chǎn)生滾動，位置超過側(cè)邊欄的 頂部閾值 后，側(cè)邊欄變?yōu)楣潭ǘㄎ?，可用于實現(xiàn)側(cè)邊導(dǎo)航欄或側(cè)邊提示信息及廣告展示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.scroll {
width: 375px;
height: 300px;
overflow: scroll;
padding: 0 10px;
box-sizing: border-box;
background: pink;
}
.wrapper {
display: flex;
}
.content {
padding: 0 15px;
width: 200px;
}
.sidebar {
width: 175px;
height: 100%;
padding: 20px;
background: #2D2D2D;
color: #FFFFFF;
box-sizing: border-box;
position: -webkit-sticky;
position: sticky;
top: 15px;
}
</style>
</head>
<body>
<div class="scroll">
<div class="wrapper">
<div class="content">
<h1>Scroll Down!</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus suscipit blanditiis delectus
quos, soluta fuga voluptatem, facere inventore neque voluptate quaerat unde laboriosam molestiae
repellat, sapiente accusamus cumque! Ipsam, illo!</p>
</div>
<div class="sidebar">
<h3>側(cè)邊欄</h3>
</div>
</div>
</div>
</body>
</html>4.4 列表描點
僅使用 css 就可實現(xiàn)頁面滾動錨點固定效果，可用于實現(xiàn)通訊錄滾動、日志記錄滾動、其他分類列表滾動效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
width: 375px;
height: 300px;
position: relative;
overflow: auto;
}
.list {
min-height: 500px;
background: pink;
}
.list-content,
.list-content>div {
padding: 10px 20px;
}
.list-header {
padding: 10px;
background: #2D2D2D;
color: #FFFFFF;
font-weight: bold;
position: sticky;
top: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="list">
<div class="list-group">
<div class="list-header">A</div>
<div class="list-content">
<div>Apple</div>
<div>Artichoke</div>
<div>Aardvark</div>
<div>Ant</div>
<div>Acorn</div>
</div>
</div>
<div class="list-group">
<div class="list-header">B</div>
<div class="list-content">
<div>Big</div>
<div>Body</div>
<div>Base</div>
<div>Baby</div>
<div>But</div>
</div>
</div>
<div class="list-group">
<div class="list-header">C</div>
<div class="list-content">
<div>Car</div>
<div>Cat</div>
<div>Cute</div>
<div>Can</div>
</div>
</div>
<div class="list-group">
<div class="list-header">D</div>
<div class="list-content">
<div>Dog</div>
<div>Date</div>
<div>Danish</div>
<div>Dandelion</div>
</div>
</div>
</div>
</div>
</body>
</html>4.5 表格表頭固定
對 table 元素的 th 或 tr 設(shè)置 position: sticky; 可以實現(xiàn)表格頭部或某行固定，也可將多個表格合并到一起，當(dāng)滾動到當(dāng)前表格是，固定頭部自動變?yōu)楫?dāng)前表格的表頭。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
width: 375px;
height: 300px;
width: fit-content;
overflow: auto;
}
table {
text-align: left;
position: relative;
border-collapse: collapse;
}
th,
td {
padding: 30px 17px;
}
tr:nth-child(even) {
background: #EFEFEF;
}
tr.red th {
background: #dd4a63;
color: white;
}
tr.green th {
background: #03C03C;
color: white;
}
tr.blue th {
background: #1580d8;
color: white;
}
th {
background: white;
position: sticky;
top: 0;
}
</style>
</head>
<body>
<div class="container">
<table>
<thead>
<tr class="red">
<th>Name</th>
<th>Age</th>
<th>Job</th>
<th>Color</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem.</td>
<td>Ullam.</td>
<td>Vel.</td>
<td>At.</td>
<td>Quis.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Ullam.</td>
<td>Vel.</td>
<td>At.</td>
<td>Quis.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Ullam.</td>
<td>Vel.</td>
<td>At.</td>
<td>Quis.</td>
</tr>
<tr class="green">
<th>Name</th>
<th>Age</th>
<th>Job</th>
<th>Color</th>
<th>URL</th>
</tr>
<tr>
<td>Lorem.</td>
<td>Ullam.</td>
<td>Vel.</td>
<td>At.</td>
<td>Quis.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Ullam.</td>
<td>Vel.</td>
<td>At.</td>
<td>Quis.</td>
</tr>
<tr class="blue">
<th>Name</th>
<th>Age</th>
<th>Job</th>
<th>Color</th>
<th>URL</th>
</tr>
<tr>
<td>Lorem.</td>
<td>Ullam.</td>
<td>Vel.</td>
<td>At.</td>
<td>Quis.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Ullam.</td>
<td>Vel.</td>
<td>At.</td>
<td>Quis.</td>
</tr>
<tr>
<td>Lorem.</td>
<td>Ullam.</td>
<td>Vel.</td>
<td>At.</td>
<td>Quis.</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>4.6 頁面進(jìn)度條（簡易）
利用 position: sticky; 定位，可以實現(xiàn)頁面瀏覽進(jìn)度條效果，以下是簡易進(jìn)度條的演示，實際實現(xiàn)中可將未滾動到頂部的元素設(shè)置為透明色，滾動到頂部時變?yōu)樗{(lán)色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
width: 400px;
height: 300px;
overflow: auto;
padding-bottom: 500px;
box-sizing: border-box;
background: pink;
}
.sticky {
width: 100px;
height: 10px;
background: rgba(36, 167, 254, 0.979);
position: -webkit-sticky;
position: sticky;
top: 0;
}
.sticky:nth-of-type(2) {
transform: translateX(100px);
}
.sticky:nth-of-type(3) {
transform: translateX(200px);
}
.sticky:nth-of-type(4) {
transform: translateX(300px);
}
</style>
</head>
<body>
<div class="container">
<h1>Sticky Progress</h1>
<div class="sticky"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, cumque? A, est perferendis explicabo
odit possimus quisquam rem ad tempore ipsa, obcaecati ex culpa similique, aliquam corporis. Quis,
nostrum expedita.</p>
<div class="sticky"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, cumque? A, est perferendis explicabo
odit possimus quisquam rem ad tempore ipsa, obcaecati ex culpa similique, aliquam corporis. Quis,
nostrum expedita.</p>
<div class="sticky"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, cumque? A, est perferendis explicabo
odit possimus quisquam rem ad tempore ipsa, obcaecati ex culpa similique, aliquam corporis. Quis,
nostrum expedita.</p>
<div class="sticky"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, cumque? A, est perferendis explicabo
odit possimus quisquam rem ad tempore ipsa, obcaecati ex culpa similique, aliquam corporis. Quis,
nostrum expedita.</p>
</div>
</body>
</html>到此這篇關(guān)于position:sticky 粘性定位的文章就介紹到這了,更多相關(guān)position:sticky 粘性定位內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
position:sticky 粘性定位的幾種巧妙應(yīng)用詳解
這篇文章主要介紹了position:sticky 粘性定位的幾種巧妙應(yīng)用詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小2021-04-23
這篇文章主要介紹了詳解css粘性定位position：sticky問題采坑的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下2019-08-26
本文主要介紹了CSS中Position:Sticky不起作用的問題解決，包含了5種不生效的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的2024-02-18
用position:sticky完美解決小程序吸頂問題的實現(xiàn)方法
這篇文章主要介紹了用position:sticky完美解決小程序吸頂問題的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下2021-04-23
CSS使用position:sticky 實現(xiàn)粘性布局的方法
這篇文章主要介紹了CSS使用position:sticky 實現(xiàn)粘性布局的方法的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-31- 用戶的屏幕越來越大，而頁面太寬的話會不宜閱讀，所以絕大部分網(wǎng)站的主體寬度和之前相比沒有太大的變化，于是瀏覽器中就有越來越多的空白區(qū)域，所以你可能注意到很多網(wǎng)站開2012-12-25
