Hide / show / reveal navbars and new post buttons on scroll, and scroll stop

[karnagebitcoin]

Demo: https://v.nostr.build/qaAL.mp4

Play version: https://playground-8ca0bb.webflow.io/scroll. (preview in mobile resolution)

document.addEventListener('DOMContentLoaded', () => {
    let lastScrollTop = 0;
    let maxScrollTop = 0;
    const topNav = document.querySelector('.topnav');
    const bottomNav = document.querySelector('.bottomnav');
    const newPostButton = document.querySelector('.new-post-button');
    const viewportHeight = window.innerHeight;

    if (!topNav || !bottomNav || !newPostButton) {
        console.error('One or more navigation elements not found');
        return;
    }

    window.addEventListener('scroll', () => {
        const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;

        maxScrollTop = Math.max(maxScrollTop, currentScrollTop);

        if (currentScrollTop > lastScrollTop) {
            // Scrolling down
            topNav.style.transform = 'translateY(-90px)';
            bottomNav.style.transform = 'translateY(54px)';
            newPostButton.style.transform = 'translateY(calc(100% + 54px + 20px))'; // Slide down the new post button out of view

        } else if (maxScrollTop - currentScrollTop >= viewportHeight * 0.75) {
            // Scrolling up more than 75% of the viewport height
            topNav.style.transform = 'translateY(0)';
            bottomNav.style.transform = 'translateY(0)';
            newPostButton.style.transform = 'translateY(0)'; // Slide up the new post button to its original position
            maxScrollTop = currentScrollTop; // Reset maxScrollTop
        }

        lastScrollTop = currentScrollTop <= 0 ? 0 : currentScrollTop;
    }, false);

    topNav.style.transition = 'transform 0.5s ease-in-out';
    bottomNav.style.transition = 'transform 0.5s ease-in-out';
    newPostButton.style.transition = 'transform 0.5s ease-in-out';
});

<style>
.topnav, .bottomnav, .new-post-button {
    position: fixed;
    transition: transform 0.5s ease-in-out;
}

.topnav {
    top: 0;
    height: 90px;
    width: 100%; /* Adjust as needed */
    z-index: 100; /* To ensure it stays on top */
    /* Additional styling as required */
}

.bottomnav {
    bottom: 0;
    height: 54px;
    width: 100%; /* Adjust as needed */
    z-index: 100; /* To ensure it stays on top */
    /* Additional styling as required */
}

.new-post-button {
    bottom: 74px; /* Height of bottomnav (54px) + 20px margin */
    right: 16px; /* Example positioning, adjust as needed */
    z-index: 100; /* To ensure it stays on top */
}


</style>

[karnagebitcoin]

Here is the version using swipe velocity instead (might be better):

https://playground-8ca0bb.webflow.io/swipe-velocity

[alltheseas]

#1465

#1465

[alltheseas]

Revisiting this in prep for design sprints - thank you again, love the interactive demo. Shows what you are proposing beautifully.

[alltheseas]

@ericholguin 👀

[alltheseas]

@danieldaquino 👀