在某些滚动后固定div在另一个div内

时间:2014-04-18 15:33:17

标签: javascript jquery html scroll fixed

我在另一个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");
    }
});

但它(显然)只是让它固定下来。我想把它固定下去,直到它出现&#34;他父母的下边界。我该怎么办?

编辑:小提琴:http://jsfiddle.net/8T7Hr/

1 个答案:

答案 0 :(得分:4)

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