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。就可以完美实现元素滑动到顶部固定到顶部位置。