I'm working on a prototype that has a navigation bar that hides when a user scrolls down on the page and shows when the user scrolls up. I would like to take this a step further by setting an event that tracks when the user is no longer scrolling and animates the navigation panel back onto the page after a short timeframe (1.5 - 2 seconds).
I have read up on how I would go about doing this but I haven't been able to find anything that meets my needs completely.
Here is my prototype for reference: https://codepen.io/v_for_vinsanity/pen/2af1bfb20ae1578466943c7356de7348
Here is the jquery I'm using to show/hide the navigation bar:
var scrollSet = null;
var didScroll = false;
var windowTop = $(window).scrollTop();
function scrollUpdate () {
didScroll = true;
windowTop = $(window).scrollTop();
}
function scrollTicker () {
if(didScroll) {
if(windowTop > scrollSet) {
$('body').addClass('hide-nav')
scrollSet = windowTop;
}
else if(scrollSet > windowTop){
$('body').removeClass('hide-nav')
scrollSet = windowTop;
}
didScroll = false
}
requestAnimationFrame(scrollTicker);
}
$(window).scroll(scrollUpdate);
scrollTicker();