在我们的实际开发中，经常会遇到页面中需要悬浮效果，比如最早的客服联系，对联悬浮广告等，今天为大家介绍一些如何实现div悬浮的效果。
传统的fixed实现：
通过css中的属性position参数设为fixed,理由它相对于浏览器为绝对位置，通过设置right和bottom，使得div固定在右下角。例如：
.demo{
position:fixed;bottom: 10px;right: 10px;
}
但是这种实现，从一开始就悬浮在浏览器的右下角了。可以满足我们绝大多数需求，但是有时候会遇到这种情景：当我们浏览器滚动条到某个位置的时候，才触发div悬浮效果。下面将来介绍：
原生JS实现滚动到一定位置，实现div悬浮
实现方法是：需要通过js来监听浏览器滚动的距离，当滚动到多少距离的时候，我们来设置div的position参数。具体如下：
*{
margin:0;padding: 0;
}
body{
height: 1500px;
}
.demo{
position: relative;left: 10px;top: 10px;z-index:9;width: 500px;height: 200px;background: #F0AD4E;
}
//html
测试
内容
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 返回顶部
原文：https://www.cnblogs.com/ypppt/p/12934579.html