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

心得技巧 2025-08-22

复制代码代码如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.*w**3.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/
psd/p
pf/p
p /p
pads/p
pf/p
pads/p
p
input type="button" name="button" id="button" value="提交" onclick="clk()" /
/p
pad/p
psf AS
D
as
d
SA
D
/p
p /p
pads/p
pf/p
pads/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