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>
    
  • 相关阅读:
    分布式系统笔记
    Paxos算法细节详解(一)
    Java G1学习笔记
    Spring Boot 的 10 个核心模块
    k8s 重点
    毕玄:阿里十年,从分布式到云时代的架构演进之路
    netty原理解析
    JVM调优总结(一):基本概念
    《快学 Go 语言》第 16 课 —— 包管理 GOPATH 和 Vendor
    Oracle 检查表空间使用情况
  • 原文地址:https://www.cnblogs.com/wujialongcn/p/1977499.html
Copyright © 2011-2022 走看看