I have a sidebar on my website that fadeIn when the user reaches a certain place which works well.
I have set the same sidebar to fadeOut / Display none when the user reacts further down the page.
This works to an extent but keeps flashing in and out when the user reaches the bottom of the page. I’d just like the user to get to the bottom of the page and the sidebar to fadeOut
Any idea?
This is my jQuery
jQuery(document).scroll(function () {
var y = jQuery(this).scrollTop();
if (y > 200) {
jQuery('.elementor-widget-sidebar').fadeIn();
} else {
jQuery('.elementor-widget-sidebar').fadeOut();
}
});
jQuery(window).scroll(function(){
if(jQuery(window).scrollTop() + $(window).height() > $(document).height() -200) {
jQuery('.elementor-widget-sidebar').css('display', 'none');
}else{
jQuery('.elementor-widget-sidebar').css('display', 'block');
}
});