JS实现网页右侧固定的浮动层
2018-07-20 来源:open-open
<!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>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点!
本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。
上一篇:统计项目源码行数的Java代码
下一篇:python编写简单抽奖系统
最新资讯
热门推荐