I am working on a sticky menu feature that appears when the user scrolls down 500px from the top of the view. I would like it to also hide when the user reaches 500px from the bottom of the page.
Any suggestions or tips are greatly appreciated.
var stickTop = $('.sidebar-stick').offset().top + 500;
$(window).scroll(function(){
if( $(window).scrollTop() > stickTop ) {
$('.sidebar-stick').css({opacity: '1'});
$('.stick-dummy').css('display', 'block');
} else {
$('.sidebar-stick').css({opacity: '0'});
$('.stick-dummy').css('display', 'none');
}
});