position:sticky用法介紹及瀏覽器相容性 | position sticky教學
使用者的螢幕越來越大,而頁面太寬的話會不宜閱讀,所以絕大部分網站的主體寬度和之前相比沒有太大的變化,於是瀏覽器中就有越來越多的空白區域,所以你可能注意到很多網站開始在滾動的時候讓一部分內容保持可見,比如,側邊欄的部分割槽域。position:sticky為此而生。position:sticky用法position:sticky是一個新的css3屬性,它的表現類似position:relative和position:fixed的合體,在目標區域在螢幕中可見時,它的行為就像position:relative;而當頁面滾動超出目標區域時,它的表現就像position:fixed,它會固定在目標位置。使用起來也非常簡單:...
使用者的螢幕越來越大,而頁面太寬的話會不宜閱讀,所以絕大部分網站的主體寬度和之前相比沒有太大的變化,於是瀏覽器中就有越來越多的空白區域,所以你可能注意到很多網站開始在滾動的時候讓一部分內容保持可見,比如,側邊欄的部分割槽域。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 0; }
JS
複製程式碼程式碼如下: var header = document.querySelector(.header); var origOffsetY = header.offsetTop; function onScroll(e) { wi...