eryn/erynwells.me
1
0
Fork 0
Code Issues 8 Pull requests 1 Projects Releases Packages Activity Actions

Use position fixed for header animation; then position sticky once animation completes

Browse source
This commit is contained in:
Eryn Wells 2022-10-15 10:17:35 -07:00
parent 172a35e27f
commit 9493b94691
2 changed files with 18 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

7
static/scripts/site.js
View file

@ -9,10 +9,17 @@ window.addEventListener("DOMContentLoaded", () => {
} }
siteHeader.classList.add("visible"); siteHeader.classList.add("visible");
siteHeader.addEventListener("animationend", () => {
console.log("Animation ended");
siteHeader.classList.add("sticky");
}, false);
try { try {
const documentReferrer = new URL(document.referrer); const documentReferrer = new URL(document.referrer);
if (documentReferrer.pathname === "/") { if (documentReferrer.pathname === "/") {
siteHeader.classList.add("animated"); siteHeader.classList.add("animated");
} else {
siteHeader.classList.add("sticky");
} }
} catch { } } catch { }
}); });

19
static/styles/root.css
View file

@ -240,6 +240,11 @@ h1, h2, h3, h4, h5, h6 {
line-height: var(--body-header-line-height); line-height: var(--body-header-line-height);
} }
h1:first-child, h2:first-child, h3:first-child,
h4:first-child, h5:first-child, h6:first-child {
margin-block-start: 0;
}
h1.site { h1.site {
color: rgb(var(--mid-blue)); color: rgb(var(--mid-blue));
font-size: 2.5em; font-size: 2.5em;
@ -265,15 +270,14 @@ h1.site a:hover { text-decoration: none; }
header.site { header.site {
display: flex; display: flex;
left: 0; left: 0;
position: sticky; position: fixed;
top: 0.5rem; top: 0;
visibility: hidden; visibility: hidden;
width: 100%; width: 100%;
z-index: 10000; z-index: 10000;
} }
header.site.visible { header.site.visible { visibility: visible; }
visibility: visible; header.site.sticky { position: sticky; }
}
header.site.animated { header.site.animated {
animation: site-header-slide-in var(--transition-duration) ease-out; animation: site-header-slide-in var(--transition-duration) ease-out;
} }
@ -282,7 +286,7 @@ header.site.animated {
top: -200px; top: -200px;
} }
to { to {
top: 0.5rem; top: 0;
} }
} }
@ -348,8 +352,7 @@ img.circular {
main { main {
max-width: var(--content-width); max-width: var(--content-width);
margin: 0 auto; margin: var(--body-item-spacing) auto;
margin-block-start: var(--body-item-spacing);
width: 100%; width: 100%;
} }