今天小编跟大家讲解下有关固定在网页右侧的浮动层实现代码 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关固定在网页右侧的浮动层实现代码 的相关资料，希望小伙伴们看了有所帮助。
复制代码代码如下: <!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="https://www.aidi.net.cn//web/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>来源：爱蒂网
