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

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像素时淡入，但是我写此代码是假设您这样做了...在这种情况下，您需要检测#outerdiv的偏移量如果您希望#innerdiv消失，因为不可见的元素没有位置。

如果您不希望#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();
 }
})

我修改了您的示例并将其保存到此pastebin中，以便您可以看到它的正常运行。

编辑：糟糕，您说过当它靠近底部时，您希望它消失...我只是将“ <”更改为“>”，现在它应该可以执行您想要的操作。 我也更新了pastebin代码。

Answer 2

var inner_offset = $("#innerdiv").offset();
var window_size = $(window).height();

if( ( inner_offset.top + $("#innerdiv").height() ) > window_size - 100 )
    $("#innerdiv").fadeOut("slow");

没有经过审核，但是应该给您大致的想法。

Answer 3

jQuery文档的偏移量