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'
p = '0px'html滚动效果代码
}else{
nav.style.position = 'static'
}
})
但是本着样式问题能css实现绝不写⼀⾏js的懒⼈原则，我⼜了很多资料最后发现position:sticky属性。
position:sticky属性作⽤是相对定位和固定定位的混合。当元素在窗⼝内定位⽅式是relative，当元素滚出屏幕定位⽅式变为fixed.
所以把元素定位设置为sticky，给个top:0。就可以完美实现元素滑动到顶部固定到顶部位置。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。