I am looking for a solution to position an image relative or absolute initially, then make it stick after some scrolling, and finally return it to its original behavior before transitioning to another section on the page. I've tried using this script but it seems to conflict with itself:
<script>
jQuery(document).ready(function(){
window.onscroll = function() {
if (window.pageYOffset <= 50){
jQuery('.stickem').css({position: 'absolute', top: '50px' });
}
else {
jQuery('.stickem').css({position: 'fixed', top: '50px'});
}
if (window.pageYOffset >= 2040){
jQuery('.stickem').css({position: 'absolute', top: '2040px' });
}
else {
jQuery('.stickem').css({position: 'fixed', top: '2040px'});
}
}
});
</script>
I just need the "fixed" class to be applied when the scroll position is between 50px and 2040px. Is there a way to achieve that?