position:sticky用法介紹及瀏覽器兼容性

發(fā)布時間：2012-12-25 14:28:12 作者：佚名

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

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

position:sticky用法
position:sticky是一個新的css3屬性，它的表現類似position:relative和position:fixed的合體，在目標區(qū)域在屏幕中可見時，它的行為就像position:relative; 而當頁面滾動超出目標區(qū)域時，它的表現就像position:fixed，它會固定在目標位置。
使用起來也非常簡單：

復制代碼

代碼如下:

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

目前來說還需要用私有前綴～～

瀏覽器兼容性：
由于這是一個全新的屬性，以至于到現在都沒有一個規(guī)范，W3C也剛剛開始討論它，而現在只有webkit nightly版本和chrome 開發(fā)版(Chrome 23.0.1247.0+ Canary)才開始支持它。
另外需要注意的是，如果同時定義了left和right值，那么left生效，right會無效，同樣，同時定義了top和bottom，top贏～～
fall back
雖然其它瀏覽器尚不支持，但是實現起來其實不難，我們可以用js簡單實現：
HTML

復制代碼

代碼如下:

CSS

復制代碼

代碼如下:

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

JS

復制代碼

代碼如下:

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);

嗯，對于前端來說，新技術用于提升用戶體驗才能體現其價值～～