rubberducky/milinda-pitch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: rubberducky:49d22484c0be173366e2d1893c81f988f41f3548
Branches Tags
rubberducky:main
...
compare: rubberducky:15feefeb158a99ad817f3e9dc02ec375e3905dfd
Branches Tags
rubberducky:main

2 Commits
49d22484c0 ... 15feefeb15

Author SHA1 Message Date
Tim Rijkse
15feefeb15 fix: better transition and better padding 2026-01-15 10:43:30 +01:00
Tim Rijkse
05c53baff7 fix: small header on scroll 2026-01-15 10:40:31 +01:00
4 changed files with 75 additions and 6 deletions
Expand all files Collapse all files

10
css/styles.css
View File

@@ -197,7 +197,10 @@ table {
--color-border: #e2e8f0; --color-border: #e2e8f0;
--color-border-light: #f1f5f9; --color-border-light: #f1f5f9;
--color-push-box-bg: #EBEEF4; --color-push-box-bg: #ebeef4;
/* Layout */
--site-header-height: 210px;
--color-success: #22c55e; --color-success: #22c55e;
--color-error: #ef4444; --color-error: #ef4444;
@@ -317,10 +320,15 @@ top-bar .actions {
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
margin: 0 auto; margin: 0 auto;
padding-top: 0;
background-color: var(--color-background); background-color: var(--color-background);
position: relative; position: relative;
} }
site-content {
display: block;
}
@media (min-width: 431px) { @media (min-width: 431px) {
body { body {
display: flex; display: flex;

6
index.html
View File

@@ -20,7 +20,7 @@
<body> <body>
<div class="mobile-container"> <div class="mobile-container">
<site-header> <site-header>
<top-bar> <top-bar slot="top-bar">
<button slot="menu-button" class="icon-button" aria-label="Menu"> <button slot="menu-button" class="icon-button" aria-label="Menu">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -77,8 +77,8 @@
</button> </button>
</div> </div>
</top-bar> </top-bar>
<horizontal-scroll-nav></horizontal-scroll-nav> <horizontal-scroll-nav slot="nav"></horizontal-scroll-nav>
<search-bar></search-bar> <search-bar slot="search"></search-bar>
</site-header> </site-header>
<site-content> <site-content>

1
js/components/horizontal-scroll-nav.js
View File

@@ -66,6 +66,7 @@ class HorizontalScrollNav extends HTMLElement {
scrollbar-width: none; scrollbar-width: none;
-ms-overflow-style: none; -ms-overflow-style: none;
padding: 0 16px; padding: 0 16px;
background-color: #ffffff;
} }
.nav-container::-webkit-scrollbar { .nav-container::-webkit-scrollbar {

64
js/components/site-header.js
View File

@@ -1,15 +1,52 @@
/** /**
* Site Header Component * Site Header Component
* Sticky header container that holds top-bar, navigation, and search * Sticky header container that holds top-bar, navigation, and search
* Collapses on scroll down, expands on scroll up
* Based on: https://stackoverflow.com/questions/63902512/
*/ */
class SiteHeader extends HTMLElement { class SiteHeader extends HTMLElement {
constructor() { constructor() {
super(); super();
this.attachShadow({ mode: "open" }); this.attachShadow({ mode: "open" });
this.prevScrollPos = 0;
this.headerOffset = 0;
this.collapsibleHeight = 0;
this.handleScroll = this.handleScroll.bind(this);
} }
connectedCallback() { connectedCallback() {
this.render(); this.render();
this.collapsible = this.shadowRoot.querySelector(".collapsible");
window.addEventListener("scroll", this.handleScroll, { passive: true });
}
disconnectedCallback() {
window.removeEventListener("scroll", this.handleScroll);
}
handleScroll() {
const currentScrollPos = window.scrollY;
const isScrollingDown = currentScrollPos > this.prevScrollPos;
const delta = currentScrollPos - this.prevScrollPos;
if (!this.collapsibleHeight && this.collapsible) {
this.collapsibleHeight = this.collapsible.scrollHeight;
}
if (isScrollingDown) {
this.headerOffset = Math.min(
this.collapsibleHeight,
Math.max(0, this.headerOffset + delta)
);
this.classList.remove("reveal");
} else if (delta < 0) {
this.headerOffset = 0;
this.classList.add("reveal");
}
this.collapsible.style.transform = `translateY(-${this.headerOffset}px)`;
this.prevScrollPos = currentScrollPos;
} }
render() { render() {
@@ -20,17 +57,40 @@ class SiteHeader extends HTMLElement {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100; z-index: 100;
background-color: var(--color-background, #ffffff); background-color: transparent;
} }
.header { .header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden;
}
.collapsible {
position: relative;
z-index: 1;
overflow: hidden;
transform: translateY(0);
transition: none;
will-change: transform;
}
:host(.reveal) .collapsible {
transition: transform 400ms ease;
}
::slotted(top-bar) {
position: relative;
z-index: 2;
border-bottom: 1px solid var(--color-border, #e2e8f0); border-bottom: 1px solid var(--color-border, #e2e8f0);
} }
</style> </style>
<header class="header"> <header class="header">
<slot></slot> <slot name="top-bar"></slot>
<div class="collapsible">
<slot name="nav"></slot>
<slot name="search"></slot>
</div>
</header> </header>
`; `;
} }