In my current project, I am experimenting with creating a floating table on the right-hand side of the screen while incorporating other content on the left.
To separate the left and right columns, I have utilized Bootstrap's class="col-md-6".
While making the table float is straightforward, I am facing the challenge of ensuring it stops floating when it reaches the bottom of the left column.
I tried implementing a solution found in this tutorial:
After following the tutorial, the floating div indeed changes to position:absolute; upon reaching the bottom. However, I encountered an issue where the table reverts back to the top position of the div instead of staying at the bottom. It only returns to floating when I scroll up slightly.
How can I prevent the floating div from jumping back up, similar to the behavior demonstrated in the JSFiddle link provided 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">
...
</table>
</div>
</div>
</div>
</div>
<div id="stop">
</div>
Current JavaScript:
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;
}
You can view the current behavior of my code in this jsFiddle example: https://jsfiddle.net/fjfkbrtn/12/
Thank you for any assistance or insights you may provide.