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();
 }
})

我修改了您的示例并将其保存到this pastebin，以便您可以看到它正常工作。

编辑：哎呀，你说你希望它在接近底部时消失......我只是改变了“＆lt;”到“＆gt;”现在它应该做你想要的。我也更新了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 documentation

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

3 个答案: