CSS 的position 有sticky和fixed,都可以实现悬浮效果,正常来讲下拉悬浮效果正常使用CSS就可以了。

文章目录

CSS代码

 .sticky { position: sticky; top: 0; } 

但是由于父级的 overflow: hidden ,overflow: scroll, overflow: auto  会导致失效。所以我们可以考虑用JS来实现下拉后自动加入position:fixed

JS代码

 


<script>
var el = document.getElementById('xuanfu');
var elTop = el.getBoundingClientRect().top - document.body.getBoundingClientRect().top;

window.addEventListener('scroll', function(){
if (document.documentElement.scrollTop > elTop){
el.style.position = 'fixed';
el.style.top = '60px';
}
else
{
el.style.position = 'static';
el.style.top = 'auto';
}
});
</script>

返回列表