html中如何实现固定在网页右侧的浮动层
短信预约 -IT技能 免费直播动态提醒
这篇文章主要介绍了html中如何实现固定在网页右侧的浮动层，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
代码如下:
<!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" class="lazy" data-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 ASDasdSAD</p><p> </p><p>ads</p><p>f</p><p>ads</p>sadSADadADa<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>感谢你能够认真阅读完这篇文章，希望小编分享的“html中如何实现固定在网页右侧的浮动层”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
