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

删除 "position: relative" 它应该按预期运行：

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

Sticky-kit元素跳跃

Sticky-kit element jumping

javascript

jquery

sticky