Sticky-kit element jumping

Question

Experiencing an issue with Sticky-kit that's causing one of my elements to jump when it reaches the bottom of its parent div.

Here's my code:

<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

Seems to be occuring due to the div being floated right, but I'm not entirely sure.

Answer 1

Remove "position: relative" and it should behave as expected :

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