CSS3的position:sticky介紹

標籤：style   blog   http   color   使用   width   

使用者的螢幕越來越大，而頁面太寬的話會不宜閱讀，所以絕大部分網站的主體寬度和之前相比沒有太大的變化，於是瀏覽器中就有越來越多的空白地區，所以你可能注意到很多網站開始在滾動的時候讓一部分內容保持可見，比如，側邊欄的部分地區。position:sticky為此而生。

 

position:sticky用法

position:sticky是一個新的css3屬性，它的表現類似position:relative和position:fixed的合體，在目的地區域在螢幕中可見時，它的行為就像position:relative; 而當頁面滾動超出目的地區域時，它的表現就像position:fixed，它會固定在目標位置。

 

使用起來也非常簡單：

.sticky {  position: -webkit-sticky;  position:sticky;  top: 15px;}

目前來說還需要用私人首碼

瀏覽器安全色性：

由於這是一個全新的屬性，以至於到現在都沒有一個規範，W3C也剛剛開始討論它，而現在只有webkit nightly版本和chrome 開發版(Chrome 23.0.1247.0+ Canary)才開始支援它。

另外需要注意的是，如果同時定義了left和right值，那麼left生效，right會無效，同樣，同時定義了top和bottom，top贏～～

fall back

雖然其它瀏覽器尚不支援，但是實現起來其實不難，我們可以用js簡單實現：

<div class="header"></div>

.sticky {  position: fixed;  top: 0;}.header {  width: 100%;  background: #F6D565;  padding: 25px 0;}

var header = document.querySelector(‘.header‘);var origOffsetY = header.offsetTop; function onScroll(e) {  window.scrollY >= origOffsetY ? header.classList.add(‘sticky‘) :                                  header.classList.remove(‘sticky‘);} document.addEventListener(‘scroll‘, onScroll);