单文件——飘浮的层——当滚动超过一屏时,飘浮层就弹出来

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>飘浮——</TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>

<SCRIPT type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></SCRIPT>

<script type="text/javascript">	
	$(function(){
		//var clientWidth = document.documentElement.clientWidth;
		//var clientHeight = document.documentElement.clientHeight;
		$("#slidebar").hide();		
		$(window).scroll(function(){
			$("#slidebar")
			var top = document.documentElement.scrollTop;
			var clientHeight = document.documentElement.clientHeight;

               //当滚动超过一屏时,飘浮层就弹出来。
			if(top>clientHeight){
				$("#slidebar").slideDown();	
			}else{
				$("#slidebar").slideUp();
			}
		});
		$('#backto').click(function(){		
			var gotoUrl = $(this).attr("goto");						
			//window.location.href = gotoUrl;	
			window.open(gotoUrl);
			//#slidebar{position:fixed;top:80%;left:85%;display:block;}
		}); 	
	});
</script>
<style type="text/css">
	#slidebar{position:absolute;display:block;}
	/* 使用fixed使id=“shangxia”的对象固定于浏览器中,相对的上距离为80%,左距离为85%,然后向左移动520px(需自行调整!!!) */		
	#backto{url(http://img.baidu.com/img/baike/sidebar2.gif) no-repeat;position:relative;cursor:pointer;height:32px;32px;margin:10px 0;}	
</style>

</HEAD>
<BODY>
<div>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>

	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>

	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>

	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>
	<h3>的对象固定于浏览器中,相对的上距离为40</h3>	
	<div id="slidebar" style="border:2px solid blue;">
		<a href="http://www.google.com.hk">转到 google</a>
		<div id="backto" goto="http://www.baidu.com">返回</div>	
		<h5>goto就是要跳转的 url</h5>
		滚动鼠标看看。
		<div>这里是其它内容</div>
	</div>
</div>
	
</BODY></HTML>
原文地址:https://www.cnblogs.com/wujialongcn/p/1977499.html