JQuery实现DIV居右侧并随鼠标滚动而滚动

最新推荐文章于 2021-06-03 06:55:15 发布

WindBlows风

最新推荐文章于 2021-06-03 06:55:15 发布

阅读量1.2k

点赞数

分类专栏： JQuery 文章标签： JQuery DIV居右且随鼠标滚动而滚动

本文链接：https://blog.csdn.net/WhenTheWindBlows/article/details/86760164

版权

该博客介绍如何利用JQuery使DIV元素始终居于屏幕右侧，并在页面滚动时保持这一位置。通过HTML引入JQuery库，CSS进行基本样式设置，再用JavaScript进行动态定位，以适应不同分辨率的屏幕。

摘要由CSDN通过智能技术生成

html
在线引入JQuery

...html头部
<script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="js/menu_right.js"></script>
...
<body>
	<div id="menu_right">
		右侧div栏随页面滚动而滚动
	</div>
</body>

CSS 外联样式
绝对定位（设置后，默认处于浏览器左边，需要一个margin-left才能居右，通过JQuery动态实现，以便适应不同分辨率屏幕）

#menu_right{position:absolute;width:120px;height:400px;background-color:#D1EEEE;}

js代码外部引入

$(document).ready(function () {
		//获取混杂模式或标准模式下的浏览器可视区宽度（兼容IE浏览器）
        var width = document.documentElement.clientWidth || document.body.offsetWidth;
        //获取div的宽度
        var menu_width = $("#menu_right").width();
        //计算该div需要margin-left的值（浏览