html通过css,js实现div悬浮效果总汇，如原生JS实现滚动到一定位置实现div悬浮

时间：2024-03-03 19:05:12

在我们的实际开发中，经常会遇到页面中需要悬浮效果，比如最早的客服联系，对联悬浮广告等，今天为大家介绍一些如何实现div悬浮的效果。

 

传统的fixed实现：

通过css中的属性position参数设为fixed,理由它相对于浏览器为绝对位置，通过设置right和bottom，使得div固定在右下角。例如：

.demo{
    position: fixed;bottom: 10px;right: 10px;
}

 

但是这种实现，从一开始就悬浮在浏览器的右下角了。可以满足我们绝大多数需求，但是有时候会遇到这种情景：当我们浏览器滚动条到某个位置的时候，才触发div悬浮效果。下面将来介绍：

 

原生JS实现滚动到一定位置，实现div悬浮

实现方法是：需要通过js来监听浏览器滚动的距离，当滚动到多少距离的时候，我们来设置div的position参数。具体如下：

<style>
*{
 margin: 0;padding: 0;
}
body{
 height: 1500px;
}
.demo{
 position: relative;left: 10px;top: 10px;z-index:9;width: 500px;height: 200px;background: #F0AD4E;
}
</style>
//html
<p style="height: 100px;">测试</p>
<div class="demo" id="demo">
 内容
</div>

 

 

js中代码：

1 function onscroll(distance){//s滚动的距离，offset默认为元素距离顶部的距离    
2     var s = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
3         dom = document.getElementById(\'demo\'),
4         offset= dom.offsetTop || distance;
5     dom.style.position=s>offset?"fixed":"relative";
6 };
7 window.addEventListener(\'scroll\',onscroll());

 

 

扩展：通过上面的js方法，同样可用实现让div到达多少距离的时候，实现显示或者隐藏， 比如我们需要做返回顶部的功能，当距离达到多少的时候就显示出来，

1 <a href="javascript:scrollTo(0,0);" id="demo">返回顶部</a>

 

相关文章