zoukankan      html  css  js  c++  java
  • 单文件——飘浮的层——当滚动超过一屏时,飘浮层就弹出来

    <!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>
    
  • 相关阅读:
    关于自发电的一些想法
    折腾了一个晚上的业余时间,终于把一块廉价的tftlcd连到了我的树莓派上
    关于飞行器从外太空返回地球时候的减速器的思考与假象
    echart漏斗图背景多出一个方框的问题解决,浪费了两个小时的教训
    linux加密文件系统 fsck 无法修复一例
    天津
    [转]Bitmap图片缩放
    python spark 配置
    screen
    tar 命令
  • 原文地址:https://www.cnblogs.com/wujialongcn/p/1977499.html
Copyright © 2011-2022 走看看