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

最新推荐文章于 2021-03-22 14:04:25 发布

WindBlows风

最新推荐文章于 2021-03-22 14:04:25 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/WhenTheWindBlows/article/details/86760164

JQuery 专栏收录该内容

3 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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的值（浏览器可视区宽度-div的宽=左外边距）
        var marginW = width-menu_width;
        //设定div的margin-left属性
        document.getElementById("menu_right").style.cssText="margin-left:"+marginW+"px";
        //获取div上边距高度
        var menuYloc = $("#menu_right").offset().top; 
        //触发window下鼠标滚动事件
        $(window).scroll(function () {
        	//当前高度=div上边距高度+鼠标滚动高度
            var offsetTop = menuYloc + $(window).scrollTop() + "px";
            //animate:JQuery自定义动画，向上margin:当前高度，并设定动画时限600毫秒,并设置queue队列为false,表示当鼠标滚动时，动画立即开始，即div随鼠标滚动而滚动
            $("#menu_right").animate({ top: offsetTop }, { duration: 600, queue: false }); 
        });
    });