獲取相對於瀏覽器窗口

位置我有2名的div和一個嵌套在另一個。我想獲取相對於瀏覽器窗口的子div位置。用例是這樣的：當用戶向下滾動瀏覽器，我想檢測孩子div的位置，如果它是100px的瀏覽器窗口的底部上方，我想慢慢淡出了出來。獲取相對於瀏覽器窗口

我如何做到這一點使用jQuery？ 2個div有相對位置或赦免位置，但不是固定位置。

2009-11-07 HP.

代碼在這裏：http://www.innovie.com/test//Untitled-3.html 我希望Windows Media Player在到達灰底欄前隱藏（或更好的淡出）。 – 2009-11-09 06:37:16

試試這個：

$(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，所以在這種情況下你不能使用帶有「container-msg」的ID。

$(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代碼。

來源

2009-11-07 14:24:30 Mottie

那麼這個東西是html結構並不總是隻有2個DIV。它可能是多層div和其他div在同一級別上面。請參閱http://www.innovie.com/test//Untitled-3.html 你認爲這是否行得通呢？ – 2009-11-09 06:38:05

我已經更新了我的答案併爲您發佈了一個示例。 – Mottie 2009-11-09 07:48:42

奧普斯，我把它從你想要的東西倒退了......現在已經修好了。 – Mottie 2009-11-10 15:43:23

-1

在 jQuery documentation

來源

2009-11-07 07:01:55 mqsoh

從在jQuery文檔偏移（）：「獲取相對於文檔的當前第一個匹配元素的偏移量，以像素爲單位，」相對於文檔和相對於視口的座標之間存在很多混淆。這個問題是指後者。 – 2012-12-31 01:25:12

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

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

未經審查的偏移，但應該給你的總體思路。

來源

2009-11-07 07:09:21

獲取相對於瀏覽器窗口

回答

相關問題