Looking to attach a right hand column to the top of the window as you scroll using Bootstrap 3.0 and 'affix' feature.
Here is the HTML for the element:
<div class="col-lg-4 right-hand-bar" data-spy="affix" data-offset-top="477">
This is the corresponding CSS:
.right-hand-bar.affix {
width: 390px;
position: fixed;
top: 0px;
right: 0px;
margin-top: 110px;
}
In the example here, some unusual behavior can be observed:
- The fixed .right-hand-bar (which contains popular blog posts, etc.) shifts to the right side of the screen because of the 'position: fixed' property being applied. Adjusting the right positioning could affect responsiveness, so I'm hesitant to do so.
- The fixed bar sometimes extends outside of the main container.
- I've had to set a specific width for the fixed element, which is not ideal since it might disrupt responsiveness.
- It would be beneficial if the scrolling of the page stopped when the bottom of the fixed element reaches the top of the footer or a predetermined offset value from the footer.
If anyone has solutions to any of these issues, your help would be greatly appreciated!
Thank you in advance!