网页上随滚动条滚动的层

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>随滚动条滚动的层</title>
<style>
body{ margin:0; padding:0; font-size:12px; font-family:"宋体",Arial, Helvetica, sans-serif;}
div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,form{ margin:0; padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
img{ border:0;}
ol,ul{list-style:none;}
a{ text-decoration:none; color:#fff;}
a:hover{ text-decoration:none;}

#scroll_div{ width:100px; height:400px; background:#990; }
#btn_close,#btn_gotop{ cursor:pointer;}
</style>
</head>

<body>
<div style=" width:1002px;height:42px;margin:0 auto; background-color:#060;">头</div>
<div style="width:1002px; margin:0 auto; background-color:#f60;">
我们提供各类编程源码、<br>素材、书籍教程、设计模板、<br>网页特效代码以及常用软件下载等，<br>做有质量的<br>学习型源码下载站。
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

</div>
<div style=" width:1002px;height:95px;margin:0 auto; background-color:#060;">底</div>
<div id="scroll_div">
<span id="btn_close">关闭</span><br />
<span id="btn_gotop">返回顶部</span>
</div>
<script type="text/javascript">
var Bianyuan = {
	//添加事件2(DOM-保证this指向对象是obj)
	addEvent : function(obj, type, fn){
		if (obj.attachEvent){
			obj['e'+type+fn] = fn;
			obj[type+fn] = function(){obj['e'+type+fn](window.event);}
			obj.attachEvent('on'+type, obj[type+fn]);
		}else{
			obj.addEventListener(type, fn, false);
		}
	},
	//获取id元素
	$ : function(id){
		return document.getElementById(id);
	},
	//取得浏览器可视区size
	getBrowserSize : function(){
		var pageWidth = window.innerWidth,
			pageHeight = window.innerHeight;
		if (typeof pageWidth != "number"){
			if (document.compatMode == "CSS1Compat"){
				pageWidth =  document.documentElement.clientWidth;
				pageHeight =  document.documentElement.clientHeight;
			} else{
				pageWidth =  document.body.clientWidth;
				pageWidth =  document.body.clientHeight;
			}
		}
		//ie减去17滚动条宽度
		if(!window.ActiveXObject){
			pageWidth -= 17;
		}
		return {
			width : pageWidth,
			height : pageHeight
		}
	},
	//获取滚动条高度
	getPageScroll : function(){ 
		var yScroll; 
		if (self.pageYOffset) { 
			yScroll = self.pageYOffset; 
		} else if (document.documentElement && document.documentElement.scrollTop){ 
			yScroll = document.documentElement.scrollTop; 
		} else if (document.body) { 
			yScroll = document.body.scrollTop; 
		} 
		return yScroll; 
	}
}
function scrollBar(scrollId, dir, headHeight, footHeight, areaWidth, o){
	//滚动框宽高
	var scrollBar = Bianyuan.$(scrollId),
		barWidth = scrollBar.offsetWidth,
		barHeight = scrollBar.offsetHeight;
	//可视区宽高
	var pageWidth = Bianyuan.getBrowserSize().width,
		pageHeight = Bianyuan.getBrowserSize().height;
	//内容宽高
	var widthMore = document.documentElement.scrollWidth,
		heightMore = document.body.scrollHeight||(document.documentElement.scrollHeight); 	
	//最大宽高
	var maxWidth = Math.max(pageWidth, widthMore),
		maxHeight = Math.max(pageHeight, heightMore);
		
	scrollBar.style.position = 'absolute';
	//设置top--假设滚动框高度小于整个页面高度，如果大于直接将其隐藏
	if (maxHeight < (barHeight + footHeight + footHeight + 4)){
		scrollBar.style.display = 'none';
	}else{
		//不挡顶部---如果想改距顶高度，改下边的第一个2值
		scrollBar.style.top = Bianyuan.getPageScroll() + headHeight + 2 + 'px';
		//不挡底部
		if ((heightMore - Bianyuan.getPageScroll() - barHeight) <= footHeight){
			scrollBar.style.top = heightMore - footHeight - barHeight - 2 + 'px';
		}
	}
	//无视主体内容-左右
	if (dir == 'left' && areaWidth == 1){
		scrollBar.style.left = 2 + 'px';
	}else if (dir == 'right' && areaWidth == 1){
		scrollBar.style.left = maxWidth - barWidth - 2 + 'px';
	//根据主体内容宽-左右
	}else if (dir == 'left' && areaWidth != 1){
		if (pageWidth >= (barWidth*2 + areaWidth + 4)){
			scrollBar.style.left = (pageWidth - areaWidth)/2 - barWidth - 2 + 'px';
		}else{
			scrollBar.style.left = 2 + 'px';
		}
	}else if (dir == 'right' && areaWidth != 1){
		if (pageWidth >= (barWidth*2 + areaWidth + 4)){
			scrollBar.style.left = (pageWidth - areaWidth)/2 + areaWidth + 2 + 'px';
		}else{
			scrollBar.style.left = maxWidth - barWidth - 2 + 'px';
		}
	}
	//关闭和返回顶部
	if (o){
		if (o.btnClose){
			var closeBtn = Bianyuan.$(o.btnClose);
			Bianyuan.addEvent(closeBtn, 'click', function(){
				scrollBar.style.display = 'none';
			})
		}
		if (o.goTop){
			var gotopBtn = Bianyuan.$(o.goTop);
			Bianyuan.addEvent(gotopBtn, 'click', function(){
				document.documentElement.scrollTop = 0;
				document.body.scrollTop = 0;
			})
		}
	}
	//改变窗口大小或滚动条滚动
	resizeWindow(scrollId, dir, headHeight, footHeight, areaWidth, o);
	
}
function resizeWindow(scrollId, dir, headHeight, footHeight, areaWidth, o){
	window.onresize = function(){scrollBar(scrollId, dir, headHeight, footHeight, areaWidth, o);}
	window.onscroll = function(){scrollBar(scrollId, dir, headHeight, footHeight, areaWidth, o);}
}
</script>
<script type="text/javascript">
scrollBar("scroll_div", "right", 42, 95, 1002, {btnClose:"btn_close",goTop:"btn_gotop"});
</script>
</body>
</html>

​x
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>随滚动条滚动的层</title>
<style>
body{ margin:0; padding:0; font-size:12px; font-family:"宋体",Arial, Helvetica, sans-serif;}
div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,form{ margin:0; padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
img{ border:0;}
ol,ul{list-style:none;}
a{ text-decoration:none; color:#fff;}
a:hover{ text-decoration:none;}
​
#scroll_div{ width:100px; height:400px; background:#990; }

CSS代码

复制格式化注释注释颜色清空

放大

CSS代码...xxxxxxxxxx
 
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

网页上随滚动条滚动的层

分类

网站常用

描述

网页上随滚动条滚动的层，拖动滚动条即可看到效果，对联广告的代码也都是基于此的，右侧的浮动层同样是可以关闭的稍微加工，便可实现一个浮动广告的代码，运行一下，先看效果吧。