固定在网页右侧的浮动层实现代码

当前位置 : 首页 > 网页制作 > 心得技巧 > 固定在网页右侧的浮动层实现代码

固定在网页右侧的浮动层实现代码

来源:互联网 作者:脚本宝典 时间:2015-08-27 13:26
码如下: !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 / titl

码如下:


<!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 type="text/css"> 
body 

margin:0px; 
padding:0px; 
margin-top:60px; 
margin-bottom:60px; 

#div_nav_zone_right 

position:absolute; 
float:right; 
z-index:3; 
width:120px; 
height:100px; 
right:0px; 
top: 332px; 
background-color:#999; 

#div_nav_zone_right_bottom 

position:absolute; 
float:right; 
z-index:3; 
width:120px; 
height:100px; 
right:0px; 
top: 532px; 
background-color:#CCC; 

#div_ul 

position:fixed; 
height:50px; 

ul,li 

margin:0px; 

li 

list-style:none; 

</style> 
<script type="text/javascript" src="js/jquery.js" ></script> 
<script type="text/javascript"> 
$(function() 

moveDiv(); //页面初始化执行 
$(window).scroll(function(){ 
moveDiv(); 
moveRightBottomDiv(); 
}); 
}); 
//右侧居中 
function moveDiv() 

var scrollTop = $(document).scrollTop(); //滚动条上端隐藏的高度 
var clientHeight = $(window).height(); //网页内容区高度 
//设置位置为 
var hei = $("#div_nav_zone_right").css("height"); 
hei = hei.replace("px",""); 
var newPosY = scrollTop + (clientHeight-hei)/2; 
$("#div_nav_zone_right").css("top",newPosY+"px"); 

//右侧居下100像素 
function moveRightBottomDiv() 

var scrollTop = $(document).scrollTop(); //滚动条上端隐藏的高度 
var clientHeight = $(window).height(); //网页内容区高度 
//设置位置为 
var hei = $("#div_nav_zone_right_bottom").css("height"); 
hei = hei.replace("px",""); 
var newPosY = clientHeight + scrollTop - hei - 100; 
$("#div_nav_zone_right_bottom").css("top",newPosY+"px"); 

</script> 
</head> 
<body> 
1 <br/>2 <br/>3 <br/>4 <br/>5 <br/>6 <br/>7 <br/>8 <br/>9 <br/>10 <br/> 
<p>sd</p> 
<p>f</p> 
<p> </p> 
<p>ads</p> 
<p>f</p> 
<p>ads</p> 
<p> 
<input type="button" name="button" id="button" value="提交" onclick="clk()" /> 
</p> 
<p>ad</p> 
<p>sf AS 

as 

SA 

</p> 
<p> </p> 
<p>ads</p> 
<p>f</p> 
<p>ads</p> 
sad 
SA 







<div id="div_nav_zone_right" > 
<ul> 
<li>边栏菜单1 </li> 
<li>边栏菜单2 </li> 
<li>边栏菜单3 </li> 
<li>边栏菜单4 </li> 
</ul> 
</div> 

<div id="div_nav_zone_right_bottom" > 
<ul> 
<li>边栏菜单1 </li> 
<li>边栏菜单2 </li> 
<li>边栏菜单3 </li> 
<li>边栏菜单4 </li> 
</ul> 
</div> 
</body> 
</html> 


Tag:
网友评论

<