38 lines
1.2 KiB
JavaScript
38 lines
1.2 KiB
JavaScript
//Nav slide in logic
|
|
|
|
const nav = document.querySelector('.st-nav');
|
|
const openButton = document.querySelector('.st-open-nav');
|
|
const closeButton = document.querySelector('.st-close-nav');
|
|
|
|
openButton.addEventListener('click', () => {
|
|
nav.classList.add('st-nav-is-open');
|
|
});
|
|
|
|
closeButton.addEventListener('click', () => {
|
|
nav.classList.remove('st-nav-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;
|
|
|
|
window.addEventListener('scroll', function(event) {
|
|
const scrollPosition = window.scrollY;
|
|
|
|
if(scrollPosition < 5) {
|
|
iconBar.classList.remove('st-icon-bar-sticky');
|
|
siteTitle.classList.remove('st-title-scrolled');
|
|
header.classList.remove('st-header-scrolled');
|
|
} else {
|
|
if(lastScrollPosition < 5) {
|
|
iconBar.classList.add('st-icon-bar-sticky');
|
|
siteTitle.classList.add('st-title-scrolled');
|
|
header.classList.add('st-header-scrolled');
|
|
}
|
|
}
|
|
|
|
lastScrollPosition = scrollPosition;
|
|
}); |