CSS中的position: sticky讓我們可以在很少的代碼行中構(gòu)建一些非常簡(jiǎn)潔的交互。當(dāng)用戶(hù)滾動(dòng)時(shí)希望UI元素在視圖中留在任何時(shí)候它都很有用，但是直到該元素與滾動(dòng)視窗的頂部/底部/左側(cè)/右側(cè)的egde達(dá)到特定距離時(shí)才變得粘性。

我們可以如何來(lái)設(shè)置一個(gè)position: sticky？

position: sticky非常適合iOS樣式列表標(biāo)題。滾動(dòng)內(nèi)容并在標(biāo)題0px從top邊緣擊中后觀察標(biāo)題。

.heading{
  background: #ccc;
  height: 50px;
  line-height: 50px;
  margin-top: 10px;
  font-size: 30px;
  padding-left: 10px;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}

登錄后復(fù)制

如果用戶(hù)向下滾動(dòng)，您希望列表標(biāo)題保持可見(jiàn)。如果向上滾動(dòng)，您還希望“添加項(xiàng)目”頁(yè)腳可見(jiàn)。試試吧！向上和向下滾動(dòng)并觀察這些元素在到達(dá)視口邊緣后如何粘附：

header{
  background: #ccc;
  font-size: 20px;
  color: #282a37;
  padding: 10px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
footer{
  background: #ccc;
  padding: 10px;
  color: #ae81fe;
  position: relative;
  position: -webkit-sticky;
  position: sticky;
}
footer{
  bottom: 0;
}
list{
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 200px;
  margin-left: 20px;
  background: #282a37;
}
item{
  padding: 10px;
  color: #fff;
  display: block;
}
body{
  padding-top: 20px;
  display: flex;
  align-items: flex-start;
}
.abs{
  position: absolute;
  right: 0;
  top: 10px;
}

登錄后復(fù)制

您還可以將項(xiàng)目粘貼到左側(cè)或右側(cè)邊緣。這是一個(gè)側(cè)面圖像查看器，帶有圖像的旋轉(zhuǎn)文本描述。將其向側(cè)面滾動(dòng)并觀察，因?yàn)槊枋鐾？吭谧髠?cè)，在視圖中，直到新描述將其推開(kāi)。

div[description]{
  max-width: 40px;
  height: 300px;
  position: -webkit-sticky;
  position: sticky;
  left: 0; /* become sticky once touching left edge */
}
sidescroller{
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  background: #000;
}
div[wrapper]{
  flex: 0 0 40px;
  max-width: 40px;
  height: 300px;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  white-space: nowrap;
  color: #fff;
}
div[item]{
  display: flex;
}
div[description] span{
  display: inline-block;
  background: rgba(0,0,0,.5);
  width: 300px;
  height: 40px;
  transform: rotate(-90deg) translateX(-300px);
  transform-origin: left top 0;
  padding-top: 11px;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  font-size: 14px;
}
img{
  max-height: 300px;
}

登錄后復(fù)制

當(dāng)部分或全部元素滾動(dòng)出視圖時(shí)，您甚至可以指定元素變?yōu)檎承詴r(shí)指定負(fù)數(shù)！這可能是有用的，例如側(cè)邊欄菜單在滾出視圖時(shí)變得粘滯，留下一個(gè)小按鈕，當(dāng)點(diǎn)擊時(shí)可以跳回側(cè)邊欄：

.sidebar{
  background: purple;
  width: 200px;
  height: 300px;
  padding: 20px;
  flex-shrink: 0;
  overflow: visible;
  position: -webkit-sticky;
  position: sticky;
  left: -200px;
}
.sidebar .handle{
  height: 30px;
  width: 30px;
  position: absolute;
  right: -30px;
  top: 0;
  background: purple;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  padding-left: 8px;
  cursor: pointer;
}
p{
  padding: 20px;
}
.site{
  display: flex;
}

登錄后復(fù)制

使用position: sticky很簡(jiǎn)單。

1、將元素聲明為sticky position:sticky（加上所需的任何瀏覽器前綴position: -webkit-sticky）

2、指定要“粘貼”的項(xiàng)目的邊（頂部|右側(cè)|底部|左側(cè)）。

3、輸入距所述邊緣的距離，當(dāng)?shù)竭_(dá)時(shí)將激活粘性。

例如，假設(shè)您希望標(biāo)題在距離滾動(dòng)區(qū)域頂部20px時(shí)變?yōu)檎承裕?/p>

.header{
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
}

登錄后復(fù)制

或者像上面的例子一樣滾動(dòng)到視圖之外的左邊緣菜單：

.menu{
  width: 200px;
  position: -webkit-sticky;
  position: sticky;
  left: -200px;
}

登錄后復(fù)制

position: sticky的注意事項(xiàng)

同級(jí)元素

如果將同級(jí)（相鄰）元素設(shè)置為position: sticky，則它們的行為與嵌套項(xiàng)目中的元素略有不同。粘性兄弟元素不會(huì)為新元素移動(dòng)。相反，它們會(huì)重疊到位：

有時(shí)候你可能會(huì)想要這種行為，但是如果你確實(shí)要設(shè)置一個(gè)背景顏色，否則用戶(hù)會(huì)看到所有的項(xiàng)目一下子被打包到同一個(gè)小空間里，看起來(lái)就像一團(tuán)糟。

在另一方面，如果你把粘性元素嵌套到父元素中，就像我們?cè)赟siDelLoad例子中所做的那樣，然后一旦另一個(gè)粘性元素開(kāi)始接觸它，粘性元素將開(kāi)始移動(dòng)，這是一個(gè)很好的做法，效果有點(diǎn)像IMO：

Overflow（溢出）

不要使用overflow: auto|scroll|hidden在position:sticky元素的父元素上，這會(huì)完全打破了粘性，但是overflow: visible可以。

絕對(duì)定位（position:absolute）

如果你想在一個(gè)粘性元素內(nèi)部使用position:absolute元素，你必須要仔細(xì)了。如果您的應(yīng)用程序在不支持的舊瀏覽器中運(yùn)行position:sticky，那么該粘性元素將不會(huì)像相對(duì)定位元素那樣運(yùn)行。因此，絕對(duì)定位元素將跳過(guò)它并查找DOM樹(shù)，直到找到下一個(gè)非靜態(tài)元素（絕對(duì)|相對(duì)固定位置），html如果沒(méi)有找到則默認(rèn)為元素。換句話(huà)說(shuō)，您的絕對(duì)定位元素將在屏幕上與您預(yù)期的不同。如果你正在建設(shè)一些舊的瀏覽器，有人可能會(huì)認(rèn)為這種情況的解決方法就是相對(duì)定位和粘性定位都設(shè)置：

.footerwithAbsolutePositionedeChildren{
position: relative;/*don't forgot this*/
}
/*NOTE: @supports has to be at the root,not nested*/
@supports(position:sticky){
.footerwithAbsolutePositionedeChildren{
position: sticky;
bottom: 20px;/now this won't mess with position in non-sticky browsers*/
}
}

登錄后復(fù)制

為什么不使用JavaScript？

利用JS你絕對(duì)可以實(shí)現(xiàn)這個(gè)。但這將涉及一個(gè)scroll事件監(jiān)聽(tīng)器，這仍然是一個(gè)非常昂貴的東西添加到您的應(yīng)用程序。滾動(dòng)是用戶(hù)執(zhí)行的最常見(jiàn)操作之一，并且在這些事件期間執(zhí)行JavaScript使得難以維持穩(wěn)定的60 FPS（每秒幀數(shù)）滾動(dòng)。UI與用戶(hù)的鼠標(biāo)/手指/手寫(xiě)筆不同步。這稱(chēng)為滾動(dòng)jank。有一種特殊的事件監(jiān)聽(tīng)器稱(chēng)為被動(dòng)事件監(jiān)聽(tīng)器，它讓瀏覽器知道您的事件不會(huì)停止?jié)L動(dòng)，因此瀏覽器可以更好地優(yōu)化這些事件。但是在IE或Edge中它們還不支持，無(wú)論如何你都需要JS后備方法。

此外，由于position:sticky您在滾動(dòng)期間沒(méi)有寫(xiě)入DOM，因此您不會(huì)導(dǎo)致任何強(qiáng)制布局和布局重新計(jì)算。因此，瀏覽器能夠?qū)⒋瞬僮饕苿?dòng)到GPU，即使粘性元素在播放中，您也可以非常流暢地滾動(dòng)。它在移動(dòng)Sarari中特別流暢。

另外，編寫(xiě)兩行聲明式CSS比使用JS替代方案更容易。

我現(xiàn)在可以用嗎？

position:sticky很多瀏覽器都支持，但Edge中還沒(méi)有。除非您在Enterprise Town承擔(dān)合同義務(wù)，否則IE在此處無(wú)關(guān)緊要。如果你必須有這種行為，那里有很多polyfill，但它們都使用JavaScript，所以你將獲得上面提到的性能。一個(gè)更好的選擇是設(shè)計(jì)你的應(yīng)用程序，以便粘性位置是一個(gè)光滑的添加，但應(yīng)用程序仍然沒(méi)有它的功能。

以上就是position: sticky的用法詳解的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注風(fēng)君子博客其它相關(guān)文章！

總結(jié)

以上是生活随笔為你收集整理的position: sticky的用法详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。