Sticky-kit 元素跳跃

Question

使用 Sticky-kit 时遇到问题，导致我的一个元素在到达其父 div 的底部时跳转。

这是我的代码：

<div class="wrapper">

<div id="bg">

  <div id="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididdunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exedrcitation ullamco laborisd nisi ut aliquip ex ea commodo consequat. Duisds aute irure dddsdsdsolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </div>

  <div id="pic1">
    Pic1
  </div>

  <div id="pic2">
    Pic2
  </div>

  <div id="pic3">
    Pic3
  </div>

</div>

</div>

CSS

.wrapper {
  height:2000px
}

#text {
  float:right;
  position: relative;
  width: 300px;
  background-color:orange;
  height:400px;

}

#bg {
    background-color: #c0c0c0;
    width:800px;
    height:650px;
  padding:0;
  margin:0;
}


#pic1 {

 height:150px;
  width: 300px;
  position:relative;
  background-color:red;

}

#pic2 {

 height:150px;
  width: 300px;
  position:relative;
  background-color:blue;

}

#pic3 {

 height:150px;
  width: 300px;
  position:relative;
  background-color:green;

}

JS

$( document ).ready(function() {
    $("#text").stick_in_parent();
  $("#pic1").stick_in_parent();
  $("#pic2").stick_in_parent();
  $("#pic3").stick_in_parent();


});

http://codepen.io/SeanLindsay1/pen/dOqgER

似乎是由于 div 向右浮动而发生的，但我不完全确定。

Answer 1

删除“位置：相对”，它应该按预期运行：

#text {
  float:right;
  width: 300px;
  background-color:orange;
  height:400px;
}