我有 2 个 div,一个嵌套在另一个中。我想获取相对于浏览器窗口的子 div 位置。用例是这样的:当用户向下滚动浏览器时,我想检测子 div 的位置,如果它在浏览器窗口底部上方 100px,我想慢慢淡出它。
我如何使用 jQuery 做到这一点? 2个div有相对位置或免责位置但不是固定位置。
最佳答案
试试这个:
$(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 才能使此脚本正常工作,因此在这种情况下您不能使用 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这样您就可以看到它在工作。
编辑:哎呀,你说你想让它在靠近底部时消失...我只是将“<”更改为“>”,现在它应该可以满足你的要求了。我也更新了 pastebin 代码。
关于javascript - 获取相对于浏览器窗口的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1692262/