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