javascript - 获取相对于浏览器窗口的位置

Question

我有 2 个 div，一个嵌套在另一个中。我想获取相对于浏览器窗口的子 div 位置。用例是这样的:当用户向下滚动浏览器时，我想检测子 div 的位置，如果它在浏览器窗口底部上方 100px，我想慢慢淡出它。

我如何使用 jQuery 做到这一点？ 2个div有相对位置或免责位置但不是固定位置。

Answer 1

试试这个:

$(window).scroll(function () {
 var distanceFromBottom = 100;
 if ( ( $("#outerdiv").offset().top + $("#innerdiv").height() - $(window).scrollTop() ) > $(window).height() - distanceFromBottom ) {
  $("#innerdiv").fadeOut("slow");
 } else {
  $("#innerdiv").fadeIn("slow");
 }
})

你没有说明你是否希望 #innerdiv 在距离底部大于 100 像素时淡入，但我写这篇文章是假设你这样做了......在这种情况下，你如果您希望 #innerdiv 淡入，则需要检测 #outerdiv 的偏移量，因为不可见元素没有位置。

如果您不希望 #innerdiv 淡入，则更改 if 语句以查看 #innerdiv 元素并删除函数的 else 部分.

---

编辑:查看您的示例页面，我猜您希望此效果在音乐播放器上起作用。因为，使用 jQuery 淡化或慢慢隐藏嵌入式对象可能不是最好的主意——它的动画效果不佳——所以，我只是突然这样做了。上面的脚本仍然有效，但正如您在下面的修订版中看到的那样，您不必使用 2 个 Div，我使用了 div 和其中的嵌入对象。外部 div 应紧密包裹内部 div 才能使此脚本正常工作，因此在这种情况下您不能使用 ID 为“container-msg”的 div。

$(window).scroll(function () {
 var distanceFromBottom = 100;
 if ( ( $(".windowMediaPlayer").offset().top + $(".windowMediaPlayer object").height() - $(window).scrollTop() ) > $(window).height() - distanceFromBottom ) {
  $(".windowMediaPlayer object").hide();
 } else {
  $(".windowMediaPlayer object").show();
 }
})

我修改了你的例子并保存到this pastebin这样您就可以看到它在工作。

编辑:哎呀，你说你想让它在靠近底部时消失...我只是将“<”更改为“>”，现在它应该可以满足你的要求了。我也更新了 pastebin 代码。