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

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

position: sticky非常適合iOS樣式列表標(biāo)題。滾動內(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ù)制

如果用戶向下滾動，您希望列表標(biāo)題保持可見。如果向上滾動，您還希望“添加項目”頁腳可見。試試吧！向上和向下滾動并觀察這些元素在到達(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ù)制

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

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)部分或全部元素滾動出視圖時，您甚至可以指定元素變?yōu)檎承詴r指定負(fù)數(shù)！這可能是有用的，例如側(cè)邊欄菜單在滾出視圖時變得粘滯，留下一個小按鈕，當(dāng)點擊時可以跳回側(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很簡單。

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

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

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

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

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

登錄后復(fù)制

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

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

登錄后復(fù)制

position: sticky的注意事項

同級元素

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

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

在另一方面，如果你把粘性元素嵌套到父元素中，就像我們在SsiDelLoad例子中所做的那樣，然后一旦另一個粘性元素開始接觸它，粘性元素將開始移動，這是一個很好的做法，效果有點像IMO：

Overflow（溢出）

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

絕對定位（position:absolute）

如果你想在一個粘性元素內(nèi)部使用position:absolute元素，你必須要仔細(xì)了。如果您的應(yīng)用程序在不支持的舊瀏覽器中運(yùn)行position:sticky，那么該粘性元素將不會像相對定位元素那樣運(yùn)行。因此，絕對定位元素將跳過它并查找DOM樹，直到找到下一個非靜態(tài)元素（絕對|相對固定位置），html如果沒有找到則默認(rèn)為元素。換句話說，您的絕對定位元素將在屏幕上與您預(yù)期的不同。如果你正在建設(shè)一些舊的瀏覽器，有人可能會認(rèn)為這種情況的解決方法就是相對定位和粘性定位都設(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你絕對可以實現(xiàn)這個。但這將涉及一個scroll事件監(jiān)聽器，這仍然是一個非常昂貴的東西添加到您的應(yīng)用程序。滾動是用戶執(zhí)行的最常見操作之一，并且在這些事件期間執(zhí)行JavaScript使得難以維持穩(wěn)定的60 FPS（每秒幀數(shù)）滾動。UI與用戶的鼠標(biāo)/手指/手寫筆不同步。這稱為滾動jank。有一種特殊的事件監(jiān)聽器稱為被動事件監(jiān)聽器，它讓瀏覽器知道您的事件不會停止?jié)L動，因此瀏覽器可以更好地優(yōu)化這些事件。但是在IE或Edge中它們還不支持，無論如何你都需要JS后備方法。

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

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

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

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

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

總結(jié)

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

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