I'm currently working on a project where I need a sidebar to scroll at a slower rate until it reaches a specific point, and then stop scrolling once that point is reached. Below is the jQuery code I've been using:
$(window).on("scroll", function() {
var sidebar = $('.sidebar');
var stopPoint = $('#stop-point');
var sidebarBottom = sidebar.offset().top + sidebar.height();
var stopPointBottom = stopPoint.offset().top + stopPoint.height() - 30;
if (sidebarBottom > stopPointBottom) {
$('.sidebar').css({'top' : "288px"});
}
else {
$('.sidebar').css({'top' : ($(this).scrollTop()/3)+"px"});
}
});
While everything works perfectly when the ELSE condition is met, I run into trouble once the IF condition becomes true. In this situation, the sidebar remains stuck at its lowest point even if I scroll back up and trigger the ELSE condition again.
If anyone could offer some insight into what I might be doing wrong and suggest a better approach to achieve the same effect, I would greatly appreciate it.
Thank you in advance for your help.