JS右侧悬浮效果_js 悬浮 右侧
赞
踩
<body height="1000px">
<div id=\"Navigation\"></div>
</body>
<style type="text/css">
#Navigation {
width: 200px;
height: 200px;
background: #0000FF;
position: absolute;
right: 0;
bottom: 0;
float: right;
margin-bottom: 250px;
}
</style>
<script type="text/javascript">
window.onscroll = function () {
var Navigation = document.getElementById('Navigation');
var DivScroll = document.documentElement.scrollTop || document.body.scrollTop; //获取移动高度
move(parseInt((document.documentElement.clientHeight - Navigation.offsetHeight) / 2 + DivScroll)); //调用传参，其中里面的参数是DIV要走的终点。也就是（可视高度-DIV高度）/2+移动高度
};
var timer = null;
function move(end) {
clearInterval(timer); //首先，先关闭之前如果有开启的setInterval;
timer = setInterval(function () {
var Navigation = document.getElementById('Navigation');
var speed = (end - Navigation.offsetTop) / 5; //计算DIV要走的速度，DIV要走的速度就等于（终点-offsetTop高度）/缩放系数
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //为了避免小数，将其取整
if (Navigation.offsetTop == end) { //当DIV到达终点，则关闭setInterval;
clearInterval(timer);
}
else {
Navigation.style.top = Navigation.offsetTop + speed - 20 + 'px'; //移动div
}
}, 30);
}
</script>
