在我们的实际开发中，经常会遇到页面中需要悬浮效果，本文将介绍通过fixed的实现，以及通过原生Js实现滚动到一定位置，实现div的悬浮
传统的fixed实现：
.demo{
position: fixed;bottom: 10px;right: 10px;
}
原生JS实现滚动到一定位置，实现div悬浮
<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>
function onscroll(distance){//s滚动的距离，offset默认为元素距离顶部的距离
var s = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
dom = document.getElementById('demo'),
offset= dom.offsetTop || distance;
dom.style.position=s>offset?"fixed":"relative";
};
window.addEventListener('scroll',onscroll());
<a href="javascript:scrollTo(0,0);" id="demo">返回顶部</a>
服务热线 19970861797
