獲取相對於瀏覽器窗口的位置

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文檔的偏移量