82 lines
3.3 KiB
JavaScript
82 lines
3.3 KiB
JavaScript
//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');
|
|
|