文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

html中如何实现固定在网页右侧的浮动层

2023-06-08 03:26

关注

这篇文章主要介绍了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" 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

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯