When changing div to position absolute it jumps to original position

Question

I am currently trying to make a floating table of the right hand side of the screen, while having other content on the left.

The left and right columns are separated using bootstrap class="col-md-6 .

making the table float is easy however i want it to stop floating at the bottom of the left hand div.

I followed this tutorial https://stackoverflow.com/a/8653109/9364403

and my floating div does change to position:absolute; when it reaches the bottom of the div.

However when the position is set to absolute, the table goes back to the position in the top of the div and does not stay at the bottom. When i scroll back up a little bit the table goes back to floating.

How can i ensure that the flaoting div does not jump back up like the jsfiddle showing the comment link above? ( http://jsfiddle.net/Kkv7X/ )

current html:

<div class="container">
  <div class="row" id="">

    <div class="col-md-6">
    Content for the left hand column
    </div>

    <div class="col-md-6" style="position:relative;">
      <div class="positionfixed" id="fixedcard">
        <table class="table" id="recipetable">
          <tr class="tablerow">
            <th class="tableheader" style="width:45%;">header 1</th>
            <th class="tableheader" style="width:25%;">header 2</th>
            <th class="tableheader" style="width:30%;">header 3</th>
            <th class="tableheader" style="width:30%;">header 4</th>
          </tr>
          <tr class="tablerow">
            <td>row 1</td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr class="tablerow">
            <td>row 2</td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr class="tablerow">
            <td>row 3</td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr class="tablerow">
            <td>row 4</td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr class="tablerow" id="TableTotalRow">
            <td>row 5</td>
            <td ></td>
            <td ></td>
            <td ></td>
          </tr>
        </table>
      </div>
    </div>

  </div>
</div>
<div id="stop">
</div>

current js:

function checkOffset() {
    if($('#fixedcard').offset().top + $('#fixedcard').height() >= $('#stop').offset().top - 10){
      $('#fixedcard').css('position', 'absolute');
    }
    if($(document).scrollTop() + window.innerHeight < $('#stop').offset().top){
      $('#fixedcard').css('position', 'fixed'); // restore when you scroll up
    }
  }
  $(document).scroll(function() {
    checkOffset();
  });

current css:

 .positionfixed{
    position: fixed;
  }

I made a jsFiddle of what my code is currently doing here: https://jsfiddle.net/fjfkbrtn/12/

Thanks.

Answer 1

When you change to absolute just set the bottom CSS property to 0px and change it back when the position goes back to fixed , like so:

function checkOffset() {
  if ($('#fixedcard').offset().top + $('#fixedcard').height() >= $('#stop').offset().top - 10) {
    $('#fixedcard').css('position', 'absolute');
    $('#fixedcard').css('bottom', '0px'); // ADD THIS
  }
  if ($(document).scrollTop() + window.innerHeight < $('#stop').offset().top) {
    $('#fixedcard').css('position', 'fixed'); 
     $('#fixedcard').css('bottom', 'initial'); // AND THIS 
  }
}
$(document).scroll(function() {
  checkOffset();
});