mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Apply header styles on back navigation

Browse Source
This commit is contained in:
prototypa
2023-01-08 13:35:12 -05:00
parent b12d5e5ad2
commit 9187fc5361
1 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/common/BasicScripts.astro
View File

@ -33,8 +33,8 @@ import { SITE } from '~/config.mjs';
} }
window.onload = function () { window.onload = function () {
let lastKnownScrollPosition = 0; let lastKnownScrollPosition = window.scrollY;
let ticking = false; let ticking = true;
attachEvent('[data-aw-toggle-menu]', 'click', function (_, elem) { attachEvent('[data-aw-toggle-menu]', 'click', function (_, elem) {
elem.classList.toggle('expanded'); elem.classList.toggle('expanded');
@ -84,20 +84,24 @@ import { SITE } from '~/config.mjs';
newlink.click(); newlink.click();
}); });
function appyHeaderStylesOnScroll() {
const header = document.getElementById('header');
if (lastKnownScrollPosition > 60 && !header.classList.contains('scroll')) {
document.getElementById('header').classList.add('scroll');
} else if (lastKnownScrollPosition <= 60 && header.classList.contains('scroll')) {
document.getElementById('header').classList.remove('scroll');
}
ticking = false;
}
appyHeaderStylesOnScroll();
attachEvent([document], 'scroll', function () { attachEvent([document], 'scroll', function () {
lastKnownScrollPosition = window.scrollY; lastKnownScrollPosition = window.scrollY;
if (!ticking) { if (!ticking) {
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
const header = document.getElementById('header'); appyHeaderStylesOnScroll();
if (lastKnownScrollPosition > 100 && !header.classList.contains('scroll')) {
document.getElementById('header').classList.add('scroll');
} else if (lastKnownScrollPosition <= 100 && header.classList.contains('scroll')) {
document.getElementById('header').classList.remove('scroll');
}
ticking = false;
}); });
ticking = true; ticking = true;
} }
}); });