固定在网页右侧的浮动层实现代码
发布时间：2014-04-23 15:31:42 作者：佚名 
我要评论
我要评论说到浮动层，想必大家都有见到过吧，很熟悉，但是你知道它是怎么实现的呢？下面有个不错的示例为大家介绍下网页右侧的固定浮动层具体实现，感兴趣的朋友可以参考下
复制代码
代码如下:<!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
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>
相关文章
Opera浏览器怎么固定网页的缩放比例？使用Opera浏览器浏览网页的时候，无意中就放大缩小网页了，想要固定网页的缩放比例，该怎么设置呢？下面我们就来看看详细的教程，需要2017-02-08- 不同的网页就有不同的排版方式，字体的大小也会不一样，切换网页的时候，我们的眼睛就很难适应，下面教大家个技巧可以固定IE浏览器所有网页字体大小2015-05-26
- 网页上中下三分布局打破了传统的布局方式，实现所谓的上下固定，中间自适应，大家可以参考学习下2014-04-30
- 前几天在对网页页面进行布局的时候，遇到一个需要将网页的最下面一个层固定起来，不随网页的滚动条滚动,添加减少浏览器的菜单也不会变动的需求2011-11-06
- 这篇文章主要介绍了css实现网页栏目左侧固定当滚动到底部时自动调整位置 ,需要的朋友可以参考下2019-05-29
最新评论