Currently, I have a left-sided "fixed" menu bar on my website that should follow the user's scroll down the page. In my attempt to achieve this functionality, I have experimented with two different methods: one utilizing CSS and the other using jQuery.
1) Initially, I tried fixing the position using CSS styling:
#leftframe {
position: fixed;
width: 200px;
}
This approach worked well for vertical scrolling; however, it posed issues when the window was narrow as it overlapped with the page content while scrolling.
2) Upon further research, I discovered a jQuery technique on Stack Overflow that allowed element fixation along one axis, as explained in this post: CSS: fixed position on x-axis but not y?
Following the guidance provided, I formulated a function to implement this behavior:
function float_vertical_scroll(id) {
$(window).scroll(function(){
$(id).css({
'top': $(this).scrollTop() //Save for later use
});
});
}
Unfortunately, testing this method on Chrome and Safari revealed an issue where the menu bar appeared choppy and flickered during vertical scrolling. Unlike the smooth sliding motion achieved through the CSS solution, the jQuery implementation did not provide the desired effect.
If anyone has insights into why the jQuery method is choppy or suggestions for improvement, I would greatly appreciate your input. Is there perhaps a third alternative that combines the benefits of both approaches?
Thank you all for your help.