CSS position下拉后元素悬浮
CSS 的position 有sticky和fixed，都可以实现悬浮效果，正常来讲下拉悬浮效果正常使用CSS就可以了。
CSS代码
[css] .sticky { position: sticky; top: 0; } [/css]
但是由于父级的 overflow: hidden ，overflow: scroll， overflow: auto 会导致失效。所以我们可以考虑用JS来实现下拉后自动加入position：fixed
JS代码
[php]
<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>
[/php]
需要外贸独立站建站或 GEO 优化服务？美络云科技（Mloun）提供 WordPress 外贸独立站建站、WooCommerce 跨境商城、海外 SEO 与 GEO 生成式引擎优化一站式服务，服务覆盖全球 25% 的国家和地区。
