我正在尝试使用 jQuery 在 div 元素上实现拖动效果。这个 div 元素通常是隐藏的，触发时弹出。
如果我没有在文档上滚动，则以下算法可以正常工作。例如，当我向下滚动文档 X 像素时，newTop 值会以某种方式添加此偏移量，并且 div 会将 X 像素移动到鼠标位置下方。
我相信这是因为 window_div.offset().top 从文档的最顶部返回 div 的位置，即使它是 float 的。有没有办法从屏幕顶部获取 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;
});
}
最佳答案
这就是您要找的!
$(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>关于javascript - 使用或不使用 jQuery 获取屏幕上的 float div 位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52307806/