position:sticky用法

用戶的屏幕愈來愈大，而頁面太寬的話會不宜閱讀，因此絕大部分網站的主體寬度和以前相比沒有太大的變化，因而瀏覽器中就有愈來愈多的空白區域，因此你可能注意到不少網站開始在滾動的時候讓一部份內容保持可見，好比，側邊欄的部分區域。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簡單實現：

HTML

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

 

CSS

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

 

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

 

這裏是一個簡單的demo。

嗯，對於前端來講，新技術用於提高用戶體驗才能體現其價值～～