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

Only apply shadow and other styles to sticky headers on scroll, issue #279

Browse Source
This commit is contained in:
prototypa
2023-12-01 11:04:47 -05:00
parent 0dc98a56f2
commit ee5bb1747a
2 changed files with 2 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -97,7 +97,7 @@ import { UI } from '~/utils/config';
}); });
function appyHeaderStylesOnScroll() { function appyHeaderStylesOnScroll() {
const header = document.getElementById('header'); const header = document.querySelector("#header[data-aw-sticky-header]");
if (lastKnownScrollPosition > 60 && !header.classList.contains('scroll')) { if (lastKnownScrollPosition > 60 && !header.classList.contains('scroll')) {
document.getElementById('header').classList.add('scroll'); document.getElementById('header').classList.add('scroll');
} else if (lastKnownScrollPosition <= 60 && header.classList.contains('scroll')) { } else if (lastKnownScrollPosition <= 60 && header.classList.contains('scroll')) {

1
src/components/widgets/Header.astro
View File

@ -54,6 +54,7 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`
{ sticky: isSticky, relative: !isSticky, dark: isDark }, { sticky: isSticky, relative: !isSticky, dark: isDark },
"top-0 z-40 flex-none mx-auto w-full border-b border-gray-50/0 transition-[opacity] ease-in-out", "top-0 z-40 flex-none mx-auto w-full border-b border-gray-50/0 transition-[opacity] ease-in-out",
]} ]}
{...isSticky ? { "data-aw-sticky-header": true } : {}}
{...id ? { id } : {}} {...id ? { id } : {}}
> >
<div class="absolute inset-0"></div> <div class="absolute inset-0"></div>