CSS position: sticky 粘性定位

admin發表於2018-12-22
CSS

如果提到position定位，最容易想到是如下幾個定位方式：

（1）.position:absolute絕對定位。

（2）.position:relative相對定位。

（3）.position:fixed固定定位。

是非常重要的知識點，想必每一個前端人員，都曾花費一定精力去掌握它們。

當前，新增一功能強大定位方式，可以輕鬆實現之前需要利用JavaScript且較為繁瑣的效果。

由此，此定位方式在可以預期的將來一定會得到廣泛應用。

那就是本文的主角position:sticky 粘性定位，功能恰如其名，後面通過程式碼演示。

語法結構：

[CSS] 純文字檢視 複製程式碼
position:sticky

top、bottom、left和right屬性分別設定元素粘性定位的臨界值。

特別說明：此定位方式當前尚屬實現性質，可以預測以後會得到標準化。

瀏覽器相容性截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/22/010143yy5vra3a2ccc8aci.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

在標準瀏覽器中支援度越來越高看起來是一種趨勢。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
.container {
  background: #eee;
  width: 400px;
  height: 1000px;
  margin: 120px auto;
}
.sticky {
  position: sticky;
  height: 60px;
  line-height: 60px;
  margin-bottom: 30px;
  background: #ccc;
  top: 0px;
}
div {
  font-size: 30px;
  text-align: center;
  color: #fff;
}
</style>
</head>
<body>
  <div class="container">
    <div class="sticky">螞蟻部落一</div>
    <div class="sticky">螞蟻部落二</div>
    <div class="sticky">螞蟻部落三</div>
    <div class="sticky">螞蟻部落四</div>
  </div>
</body>
</html>

上述程式碼將class屬性值為"sticky"的元素設定為粘性定位。

當向下拖動滾動條的時候，div元素會向上移動，但是當達到視口包含塊頂端的時候，自動會固定住。

這是十分常見的效果，如果不使用此定位方式，利用JavaScript實現比較繁瑣。

使用top、bottom、left和right屬性可以設定元素固定的臨界位置。

粘性定位不會脫離文件流，它的表現有點像是相對定位於固定定位的組合體。

關於視口包含塊的概念，在CSS position:fixed 固定定位一文後半部分有所涉及。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
.container {
  background: #eee;
  width: 400px;
  height: 1000px;
  margin: 120px auto;
}
.sticky {
  position: sticky;
  height: 60px;
  line-height: 60px;
  margin-bottom: 30px;
  background: #ccc;
  top: 50px;
}
div {
  font-size: 30px;
  text-align: center;
  color: #fff;
}
</style>
</head>
<body>
  <div class="container">
    <div class="sticky">螞蟻部落一</div>
    <div class="sticky">螞蟻部落二</div>
    <div class="sticky">螞蟻部落三</div>
    <div class="sticky">螞蟻部落四</div>
  </div>
</body>
</html>

上述程式碼設定class屬性值為"sticky"的div元素距離視口包含塊頂部50px的時候固定。

四個屬性不能採用預設值，必須至少顯式設定其中屬性之一，粘性定位才會生效。

且left與top的優先順序大於right與bottom，如通過同時設定的話。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
#box{
  width:500px;
  height:500px;
  overflow:auto;
  margin:100px;
}
.container {
  background: #eee;
  width: 400px;
  height: 1000px;
  margin: 120px auto;
}
.sticky {
  position: sticky;
  height: 60px;
  line-height: 60px;
  margin-bottom: 30px;
  background: #ccc;
  top:0px;
}
div {
  font-size: 30px;
  text-align: center;
  color: #fff;
}
</style>
</head>
<body>
<div id="box">
  <div class="container">
    <div class="sticky">螞蟻部落一</div>
    <div class="sticky">螞蟻部落二</div>
    <div class="sticky">螞蟻部落三</div>
    <div class="sticky">螞蟻部落四</div>
  </div>
<div>
</body>
</html>

上述程式碼是基於box元素進行粘性定位的，而不是基於視口包含塊。

粘性定位的定位參考物件距離其最近的overflow屬性值為visible的具有滾動條的祖先元素，如果以body或者body父輩元素為參考，定位參考物件是視口包含塊。

同時還要注意一點，粘性定位元素的任何一個父輩元素的overflow屬性值必須是visible，否則粘性定位不生效。

最後總結如下：

（1）.粘性定位必須設定top、bottom、left和right屬性之一，否則不會生效。

（2）.粘性定位任何一個父元素overflow屬性值必須是visible，否則不會生效。

（3）.粘性定位基於距離他最近的具有滾動條的父元素，否則基於視口包含塊。

相關文章