获取相对于浏览器窗口

问题描述：

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

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

代码在这里：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代码。

那么这个东西是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

答

在 jQuery documentation

从在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");

未经审查的偏移，但应该给你的总体思路。

获取相对于浏览器窗口

相关推荐