Hi everyone, I'm having trouble with creating a sticky sidebar that functions the way I want it to. When scrolling, the sidebar keeps getting displaced from its original position on the left side. You can see the issue in this JS Fiddle using an image: Js fiddle. Any suggestions on what might be causing this problem or how I can fix it?
Thank you for your help!
Below is the jQuery code snippet:
jQuery(function() { // document ready
var sideBarTop = $('#sidebar').offset().top;
var sideBarLeft = $('#sidebar').offset().left
jQuery(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop();
if(sideBarTop < windowTop) {
$('#sidebar').css({position: 'fixed', top: 0, left: sideBarLeft});
}
else {
$('#sidebar').css('position', 'static');
}
});
});