js 上下滑动的侧边栏

最新推荐文章于 2024-07-12 09:36:48 发布

weixin_30755393

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量84

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiaoxiaosha/p/3648501.html

版权

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>上下滑动的侧边栏</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
*{
	margin: 0px; padding: 0px; font-size:14px; font-family:'微软雅黑'; font-size:12px;
}
.clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block;}
* html .clearfix{height:1%}
.clearfix{display:black;}
ul li{
  list-style:none;
}
#box{width:100px; height:100px; background:red; position:absolute; top:416px;right:0px;}
</style>
</head>
<body style='height:2000px;'>
<script type="text/javascript">
window.οnlοad=window.οnscrοll=function(){
  var oBox = document.getElementById('box');
  var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
  var t = Math.round(scrollTop + (document.documentElement.clientHeight - oBox.offsetHeight)/2); //固定在页面中间
  Move(oBox,t);
}
function Move(obj,iTarget){
  clearInterval(obj.timer);
  obj.timer = setInterval(function(){
    var ispeed=(iTarget-obj.offsetTop)/8;
	ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);
	if(obj.offsetTop == iTarget){
	   clearInterval(obj.timer);
	}else{
	   obj.style.top=obj.offsetTop+ispeed+'px'; 
	   obj.innerHTML = obj.style.top;
	}
  },30);
};
</script>
<div id='box'></div>
</body>
</html>

document.documentElement.scrollTop //IE FF获取滚动条的高度

document.body.scrollTop //谷歌下面获取滚动条的高度

document.documentElement.clinetHeight //页面上可视区的高度

obj.offsetHeight 元素的高度　　

转载于:https://www.cnblogs.com/xiaoxiaosha/p/3648501.html

weixin_30755393

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 上下滑动的侧边栏

<!DOCTYPE HTML><html lang="zh-cn"><head><meta charset="utf-8" /><meta http-equiv="Content-Language" content="zh-cn" /><title>上下滑动的侧边栏</title>&lt...
复制链接

扫一扫