我在另一个 div 中有一个 div,如下所示:
<div class="parent">
<div class="child">Text</div>
</div>
我想用 jQuery 来使 child 固定,只要它保留在他的父级中。我尝试过这样的事情:
$(document).scroll(function() {
var y = $(document).scrollTop();
if(y >= $(".child").offset().top) {
$(".child").css("position", "fixed");
} else {
$(".child").css("position", "relative");
}
});
但它(显然)只是修复了它。我想将其固定,直到它“击中”他 parent 的底部边框。我该怎么办?
编辑: fiddle :http://jsfiddle.net/8T7Hr/
最佳答案
var parent_top = $(".parent").offset().top;
var parent_bottom = $(".parent").offset().top + $(".parent").height() - $(".child").height();
$(document).scroll(function() {
var y = $(document).scrollTop();
if(y >= parent_top && y <= parent_bottom) {
$(".child").css({"position": "fixed", "top" : "0px"});
} else {
$(".child").css("position", "relative");
}
});
<强> FIDDLE
关于javascript - 修复了某些滚动后 div 位于其他 div 内的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23157301/