menu_hidden.html

<style>
#mobile-top-line.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  background: white; /* или нужный фон */
  transition: transform 0.3s ease;
  transform: translateY(0);
}

#mobile-top-line.hidden {
  transform: translateY(-100%);
}
  
</style>
<div id="content">
  <div id="mobile-top-line">...menu...</div>
  <div id="main">...content...</div>
</div>
<script>
const topLine = document.getElementById('mobile-top-line');
const mmscrollContainer = getElementById('content');
const topLineHeight = topLine.offsetHeight;
let isStickyVisible = false;
let lastScrollTop = mmscrollContainer.scrollTop;
const scrollThreshold = 5;

function handleScroll() {
    const currentScroll = mmscrollContainer.scrollTop;
    if (currentScroll < 1) {
        if (isStickyVisible) {
            topLine.classList.remove('sticky');
            topLine.removeAttribute('style');
            mmscrollContainer.removeAttribute('style');
            isStickyVisible = false;
        }
        lastScrollTop = currentScroll;
        return;
    }

    if(currentScroll < topLineHeight) return;
    const delta = currentScroll - lastScrollTop;
    if (Math.abs(delta) < scrollThreshold) return;
    const isScrollingUp = delta < 0;
    const isScrollingDown = delta > 0;

    if (isScrollingUp && !isStickyVisible) {
        topLine.classList.add('sticky');
        topLine.style.left = '0';
        mmscrollContainer.style.paddingTop = `${topLineHeight}px`;
        isStickyVisible = true;
    } else if (isScrollingDown && isStickyVisible) {
        topLine.classList.remove('sticky');
        topLine.removeAttribute('style');
        mmscrollContainer.removeAttribute('style');
        isStickyVisible = false;
    }

    lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;
}

mmscrollContainer.addEventListener('scroll', handleScroll);
</script>