slowtwitch-news/assets/js/st-nav.js

//Nav slide in logic

const nav = document.querySelector('.st-nav');
const openNavButton = document.querySelector('.st-open-nav');
const closeNavButton = document.querySelector('.st-close-nav');

openNavButton.addEventListener('click', () => {
    nav.classList.add('st-nav-is-open');
});

closeNavButton.addEventListener('click', () => {
    nav.classList.remove('st-nav-is-open');
});

//Search slide logic

const searchOverlay = document.querySelector('.st-search-overlay');
const openSearchButton = document.querySelector('.st-open-search');
const closeSearchButton = document.querySelector('.st-close-search');

openSearchButton.addEventListener('click', () => {
    searchOverlay.classList.add('st-search-is-open');
});

closeSearchButton.addEventListener('click', () => {
    searchOverlay.classList.remove('st-search-is-open');
});

//Sticky nav logic

const iconBar = document.querySelector('.st-header-icon-bar');
const siteTitle = document.querySelector('.st-site-title');
const siteTitleBall = document.querySelector('.st-site-title__ball');
const header = document.querySelector('.st-header');
const topper = document.querySelector('.st-article-section-topper');
const desktopNavLinks = document.querySelector('.st-desktop-nav-links');
const mainTitleLink = document.querySelector('.st-site-title-link__main-title'); // cache link, remove href when scrolled
const mainTitleBallLink = document.querySelector('.st-site-title-link__ball');
const siteTitleGrid = document.querySelector('.st-site-title-grid');
const hiddenHomeHeaderLink = document.querySelector('.st-hidden-home-header-link');
let lastScrollPosition = 0;
const scrollDepthActivationPoint = 80;

window.addEventListener('scroll', function(event) {
    setHeaderClasses()
});

window.addEventListener('load', function(event) {
    setHeaderClasses()
})

function setHeaderClasses() {
    const scrollPosition = window.scrollY;

    if(scrollPosition < scrollDepthActivationPoint) {
        iconBar.classList.remove('st-icon-bar-sticky');
        siteTitle.classList.remove('st-title-scrolled');
        siteTitleGrid.classList.remove('st-disable-link', 'st-send-to-back');
        header.classList.remove('st-header-scrolled');
        siteTitleBall.classList.remove('st-title-scrolled__ball');
        topper.classList.remove('st-article-section-topper-scrolled');
        desktopNavLinks.classList.remove('st-desktop-nav-links-scrolled');
        hiddenHomeHeaderLink.classList.remove('st-hidden-home-header-link-scrolled');
    } else {
        if(lastScrollPosition < scrollDepthActivationPoint) {
            iconBar.classList.add('st-icon-bar-sticky');
            siteTitle.classList.add('st-title-scrolled');
            siteTitleGrid.classList.add('st-disable-link', 'st-send-to-back');
            header.classList.add('st-header-scrolled');
            siteTitleBall.classList.add('st-title-scrolled__ball');
            topper.classList.add('st-article-section-topper-scrolled');
            desktopNavLinks.classList.add('st-desktop-nav-links-scrolled');
            hiddenHomeHeaderLink.classList.add('st-hidden-home-header-link-scrolled');
        } 
    }
    
    lastScrollPosition = scrollPosition;
}

const navItems = document.querySelectorAll('.st-header-icon-bar__item');