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

最新推荐文章于 2021-06-05 01:20:49 发布

我是王老吉吖

最新推荐文章于 2021-06-05 01:20:49 发布

阅读量1.3k

点赞数 1

分类专栏： html 文章标签： html css javascript

本文链接：https://blog.csdn.net/wangjijun0807/article/details/24360173

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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="提交" οnclick="clk()" />
</p>
<p>ad</p>
<p>sf AS
  D
  as
  d
  SA
  D
  </p>
<p> </p>
<p>ads</p>
<p>f</p>
<p>ads</p>
  sad
  SA
  D
  a
  d
  A
  D
  
  a  
 

<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>

我是王老吉吖

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实现网页右侧固定的浮动层

无标题文档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;
复制链接

扫一扫

专栏目录