I'm facing a challenge with my nested div setup: I want the inner div to be absolutely positioned, but when scrolling to the bottom it should switch to fixed positioning. Currently, it's set up as a sidebar, but I'd like it to scroll along with the middle content until reaching the bottom of the div, at which point it should become fixed.
Any suggestions?
I've been trying to tweak this code without success:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type="text/javascript">
$(function() {
var offset = $("#right_side_bar").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
document.getElementById("#right_side_bar").style.position = 'fixed';
} else {
};
});
});
</script>
Image: https://i.sstatic.net/S2Nbi.png
The above code isn't doing the trick, so here's more context on the issue. I have a large container div and a right sidebar named "right_side_bar." The sidebar contains more content than what is currently visible, so I want it to scroll along with the container until all content is displayed in the sidebar (meaning the user has reached the bottom), at which point it should stop scrolling and remain fixed. If the user scrolls back to the top, it should go back to being absolute. Let me know if that makes sense!
https://i.sstatic.net/S2Nbi.png
#right_side_bar {
position:absolute;
margin-top:38px;
width:272px;
margin-left:722px;
background-color:#FFF; /* D6E6F7 */
height:100%;
overflow:scroll;
z-index: 0;
}
#container{
width: 994px;
/*height: 885px;*/
background-color: #D6E6F7;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
/*padding-bottom: 30px;*/
}