使用或不使用 jQuery 在屏幕上获取浮动 div 位置
Posted
技术标签:
【中文标题】使用或不使用 jQuery 在屏幕上获取浮动 div 位置【英文标题】：Get float div position on screen, with or without jQuery 【发布时间】：2019-02-17 20:10:18 【问题描述】：我正在尝试使用 jQuery 在 div 元素上实现拖动效果。这个 div 元素通常是隐藏的，触发时会弹出。
如果我没有滚动我的文档，以下算法可以正常工作。例如，当我向下滚动文档 X 像素时，newTop 值会以某种方式添加此偏移量，并且 div 会将 X 像素移动到鼠标位置下方。
我相信这是因为window_div.offset().top 从文档的最顶部返回 div 的位置，即使它是浮动的。有没有办法从屏幕顶部获取 div 的位置？
或者有其他解决方案吗？
make_window_draggable(window_div)
var bWindowMoveMouseDown = false;
var windowPositionLeft = 0;
var windowPositionTop = 0;
var initMousePositionLeft = 0;
var initMousePositionTop = 0;
var newMousePositionLeft = 0;
var newMousePositionTop = 0;
window_div.bind('mousedown', function(e)
windowPositionLeft = window_div.offset().left;
windowPositionTop = window_div.offset().top;
initMousePositionLeft = e.screenX;
initMousePositionTop = e.screenY;
bWindowMoveMouseDown = true;
);
$(document).bind('mousemove',function(e)
if(bWindowMoveMouseDown)
newMousePositionLeft = e.screenX;
newMousePositionTop = e.screenY;
let relativeMouseLeft = newMousePositionLeft - initMousePositionLeft;
let relativeMouseTop = newMousePositionTop - initMousePositionTop;
var newLeft = windowPositionLeft + relativeMouseLeft;
var newTop = windowPositionTop + relativeMouseTop;
//check bounds
window_div.css(
left:newLeft,
top:newTop
);
);
window_div.bind('mouseup', function(e)
bWindowMoveMouseDown = false;
);
【问题讨论】：
这个问题可能对你有帮助***.com/questions/9334084/moveable-draggable-div 【参考方案1】：这就是你要找的东西！
$(window).on('scroll', function ()
var scrollTop = $(window).scrollTop(),
elementOffset = $('#my-element').offset().top,
distance = (elementOffset - scrollTop);
console.log(distance);
);#my-element
position: absolute;
top: 500px;
background: gold;
height: 50px;
width: 50px;
#output
position: fixed;
top: 0;
right: 0;
height: 200px;
width: 200px;
border: 1px solid yellow;
overflow: hidden;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="my-element"></div>取自https://***.com/a/9880571/3912615
【讨论】：
以上是关于使用或不使用 jQuery 在屏幕上获取浮动 div 位置的主要内容，如果未能解决你的问题，请参考以下文章