使用jquery的scrollTop来定位绝对Div

发布于 2024-09-01 21:10:08 字数 411 浏览 6 评论 0原文

我正在尝试使用 Jquery 定位绝对 DIV,具体取决于用户在页面上单击的位置。

目前,这效果很好,

$('#window').css('left', jsEvent.pageX);
$('#window').css('top', jsEvent.pageY);

这将元素精确定位在我的鼠标单击屏幕的位置...

直到您向下滚动为止。这就是为什么我试图实现一些将页面顶部的像素数量考虑在内的东西。我以为这样的东西......

$('#window').css('top', jsEvent.pageY + scrollTop());

会成功,不幸的是它不起作用。

有什么提示吗?

谢谢,

蒂姆

I am trying to position an Absolute DIV using Jquery, depending on where the user is clicking on the page.

At the moment this works just great

$('#window').css('left', jsEvent.pageX);
$('#window').css('top', jsEvent.pageY);

This positions the element exactly where my mouse has clicked the screen...

Until you scroll down that is. That is why I am trying to achieve something that will take the amount of pixels from the top of the page into account. I thought something like this...

$('#window').css('top', jsEvent.pageY + scrollTop());

would do the trick, unfortunately it doesn't work.

Any hints?

Thanks,

Tim

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

生来就爱笑 2024-09-08 21:10:08

这在 Firefox 中绝对有效。因此,它应该可以在 Chrome、Safari 和 Opera 中运行。然而,IE,我不完全确定。试一试。

$('#window').css({
    left: e.clientX
    , top: e.clientY + document.documentElement.scrollTop
});

编辑:这个新版本应该适用于大多数(如果不是所有)浏览器。

var rxp = /webkit/gi;

$('#window').css({
   left: e.clientX
   , top: e.clientY + rxp.test(window.navigator.userAgent) ? document.body.scrollTop : document.documentElement.scrollTop
}); 

This definitely works in Firefox. As such, it should work in Chrome, Safari and Opera. IE however, I'm not entirely sure. Give it a shot.

$('#window').css({
    left: e.clientX
    , top: e.clientY + document.documentElement.scrollTop
});

EDIT: This new version should work in most, if not all browsers.

var rxp = /webkit/gi;

$('#window').css({
   left: e.clientX
   , top: e.clientY + rxp.test(window.navigator.userAgent) ? document.body.scrollTop : document.documentElement.scrollTop
}); 
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文