53 lines
1.7 KiB
JavaScript
53 lines
1.7 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 header = document.querySelector('.st-header');
|
|
let lastScrollPosition = 0;
|
|
const scrollDepthActivationPoint = 100;
|
|
|
|
window.addEventListener('scroll', function(event) {
|
|
const scrollPosition = window.scrollY;
|
|
|
|
if(scrollPosition < scrollDepthActivationPoint) {
|
|
iconBar.classList.remove('st-icon-bar-sticky');
|
|
siteTitle.classList.remove('st-title-scrolled');
|
|
header.classList.remove('st-header-scrolled');
|
|
} else {
|
|
if(lastScrollPosition < scrollDepthActivationPoint) {
|
|
iconBar.classList.add('st-icon-bar-sticky');
|
|
siteTitle.classList.add('st-title-scrolled');
|
|
header.classList.add('st-header-scrolled');
|
|
}
|
|
}
|
|
|
|
lastScrollPosition = scrollPosition;
|
|
}); |