html滾動到頂部固定最簡單實現

html滾動到頂部固定最簡單實現

1.今天遇到一個需求:搜索框滑動到頂部固定到頂部位置

先給解決方式，兩行css搞定。

.serach-view{
  position:sticky;
  top: 0;
}

一開始的想法是通過js實現，監聽瀏覽器的滾動事件，判斷頁面滾動距離大於 相對於頁面頂部的距離時，將元素的 position 屬性值 改為 fexid。然后在網上找到了這樣一段代碼

let nav = document.querySelector('.nav')

window.addEventListener('scroll',function(e){
  if(window.pageYOffset > nav.offsetTop){
    nav.style.position = 'fixed'
    nav.style.top = '0px'
  }else{
    nav.style.position = 'static'
  }
})

但是本着樣式問題能css實現絕不寫一行js的懶人原則，我又找了很多資料最后發現position:sticky屬性。

position:sticky屬性作用是相對定位和固定定位的混合。當元素在窗口內定位方式是relative,當元素滾出屏幕定位方式變為fixed.

所以把元素定位設置為sticky，給個top:0。就可以完美實現元素滑動到頂部固定到頂部位置。