在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现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; 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>