整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
擊右上方紅色按鈕關(guān)注“web秀”，讓你真正秀起來！
如果問，CSS 中 position 屬性的取值有幾個？
大部分人的回答是，大概是下面這幾個吧？
{
position: static;
position: relative;
position: absolute;
position: fixed;
}
sticky 英文字面意思是粘，粘貼，所以姑且稱之為粘性定位。下面就來了解下這個處于實(shí)驗(yàn)性的取值的具體功能及適用場景。這是一個結(jié)合了 position:relative 和 position:fixed 兩種定位功能于一體的特殊定位，適用于一些特殊場景。
什么是結(jié)合兩種定位功能于一體呢？
元素先按照普通文檔流定位，然后相對于該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位。而后，元素定位表現(xiàn)為在跨越特定閾值前為相對定位，之后為固定定位。
這個特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。
講述具體示例之前，還是很有必要了解一下 position:sticky 的兼容性，除了IE以外了，其他新版瀏覽器都是Ok的，當(dāng)然，很多老瀏覽器都是不行的。[CSS兼容性查詢網(wǎng)址](https://www.caniuse.com)
如何運(yùn)用position:sticky實(shí)現(xiàn)粘性布局？
IOS 家族（SAFARI && IOS SAFARI）和 Firefox 很早開始就支持 position:sticky 了。而 Chrome53~55 則需要啟用實(shí)驗(yàn)性網(wǎng)絡(luò)平臺功能才行。其中 webkit 內(nèi)核的要添加上私有前綴 -webkit-。
看看下面這張 GIF 圖，想想要實(shí)現(xiàn)的話，使用 JS + CSS 的方式該如何做？
如何運(yùn)用position:sticky實(shí)現(xiàn)粘性布局？
按照常規(guī)做法，大概是監(jiān)聽頁面 scroll 事件，判斷每一區(qū)塊距離視口頂部距離，超過了則設(shè)定該區(qū)塊 position:fixed，反之去掉。
而使用 position:sticky ，則可以非常方便的實(shí)現(xiàn)
<div class="container"> <div class="sticky-box">Javan的博客</div> <div class="sticky-box"></div> <div class="sticky-box">慕課網(wǎng)</div> <div class="sticky-box">Sticky</div> </div>
.container {
background: #eee;
width: 600px;
height: 1000px;
margin: 0 auto;
}
.sticky-box {
position: -webkit-sticky;
position: sticky;
height: 60px;
margin-bottom: 50px;
background: #10af7e;
top: 0px;
}
div {
font-size: 30px;
text-align: center;
color: #fff;
line-height: 60px;
}
只需要給每個內(nèi)容塊添加`position: -webkit-sticky;position: sticky;`就可以輕松實(shí)現(xiàn)了。
position:sticky 的生效是有一定的限制的，總結(jié)如下：
1. 須指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。并且 top 和 bottom 同時設(shè)置時，top 生效的優(yōu)先級高，left 和 right 同時設(shè)置時，left 的優(yōu)先級高。
2. 設(shè)定為 position:sticky 元素的任意父節(jié)點(diǎn)的 overflow 屬性必須是 visible，否則 position:sticky 不會生效。這里需要解釋一下：
> 如果 position:sticky 元素的任意父節(jié)點(diǎn)定位設(shè)置為 overflow:hidden，則父容器無法進(jìn)行滾動，所以 position:sticky 元素也不會有滾動然后固定的情況。
> 如果 position:sticky 元素的任意父節(jié)點(diǎn)定位設(shè)置為 position:relative | absolute | fixed，則元素相對父元素進(jìn)行定位，而不會相對 viewprot 定位。
3. 達(dá)到設(shè)定的閥值。這個還算好理解，也就是設(shè)定了 position:sticky 的元素表現(xiàn)為 relative 還是 fixed 是根據(jù)元素是否達(dá)到設(shè)定了的閾值決定的。
喜歡小編記得點(diǎn)擊關(guān)注，了解更多資源哦！
近遇見一個吸頂效果的需求，要想實(shí)現(xiàn)這個效果，使用UI庫也可以，但如果使用position的sticky粘黏屬性可以輕易實(shí)現(xiàn)，但在實(shí)際使用中需要注意一些細(xì)節(jié)，于是寫了個簡單demo，效果如下
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sticky</title>
<style>
html,body{
height: 100%;
}
.wrap{
overflow: auto;
height: 100%;
}
.div1{
height: 30px;
background: red;
text-align: center;
line-height: 30px;
color: aliceblue;
position: sticky;
top: 0;
}
.div2{
height: 500px;
background: #333;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="div1">A</div>
<div class="div2"></div>
<div class="div1">B</div>
<div class="div2"></div>
<div class="div1">C</div>
<div class="div2"></div>
<div class="div1">D</div>
<div class="div2"></div>
</div>
</body>
</html>ps:
osition: sticky; 基于用戶的滾動位置來定位。
粘性定位的元素是依賴于用戶的滾動，在 position:relative 與 position:fixed 定位之間切換。
在目標(biāo)區(qū)域以內(nèi)，它的行為就像 position:relative; 而當(dāng)頁面滾動超出目標(biāo)區(qū)域時，它的表現(xiàn)就像 position:fixed;，它會固定在目標(biāo)位置。
元素定位表現(xiàn)為在跨越特定閾值前為相對定位，之后為固定定位。
這個特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。
使用條件：
1、父元素不能overflow:hidden或者overflow:auto屬性。
2、必須指定top、bottom、left、right4個值之一，否則只會處于相對定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素僅在其父元素內(nèi)生效
---------------------
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
