Expand/collapse menu on scroll

collapsibleMenu.js

var currentMenuState = 'open'
var lastScrollPosition = window.scrollY
const minimizeMenuY = 60

const collapseMenu = () => {
	$('.top-bar-container').css('overflow', 'hidden')
	gsap.to('.top-bar-container', {
		height: 0,
		duration: 0.5,
		ease: 'power3.inOut'
	})
	currentMenuState = 'closed'
}

const expandMenu = () => {
	gsap.to('.top-bar-container', {
		height: 'auto',
		duration: 0.5,
		ease: 'power3.inOut',
		onComplete: function() {
			if( currentMenuState === 'open' ) {
				$('.top-bar-container').css('overflow', 'visible')
			}
		}
	})
	currentMenuState = 'open'
}

const handleMenuState = () => {
	if( window.outerWidth > 768 ) {
		if( window.scrollY >= minimizeMenuY && window.scrollY > lastScrollPosition && currentMenuState === 'open' ) {
			collapseMenu()
		} else if( window.scrollY >= minimizeMenuY && window.scrollY < lastScrollPosition && currentMenuState === 'closed' ) {
			expandMenu()
		} else if( window.scrollY < minimizeMenuY && currentMenuState === 'closed' ) {
			expandMenu()
		}
		lastScrollPosition = window.scrollY
	} else {
		expandMenu()
	}
}

$(window).on( 'scroll', handleMenuState )

Be sure to you include gsap or switch to jQuery animations where gsap is used