kantarciandClaude Fable 5.1
3785d3dfef
Cards, quotes and call-to-action bands side by side in a row are equal in height again: the stacking margin meant for a column no longer applies inside a row. The header can carry a second set of colours for the scrolled page, the Flatsome transparent header: a "scrolled" state next to "hover", limited to colours, shadow and opacity, marked by a small script only where it is used, plus a setting that lets the header float over the first section. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
20 lines
962 B
JavaScript
20 lines
962 B
JavaScript
/**
|
|
* Marks the page as scrolled.
|
|
*
|
|
* A header can carry a second set of colours for the scrolled page - transparent over the hero,
|
|
* solid once the reader has moved on, the way the Flatsome transparent header works. The
|
|
* stylesheet holds both states; this only says which one applies. Without the script the header
|
|
* keeps its normal colours, which is a readable page, not a broken one.
|
|
*/
|
|
export function initScrolled(doc = document) {
|
|
const view = doc.defaultView;
|
|
let queued = false;
|
|
const sync = () => { queued = false; doc.documentElement.classList.toggle('is-scrolled', view.scrollY > 40); };
|
|
const onScroll = () => { if (!queued) { queued = true; view.requestAnimationFrame(sync); } };
|
|
view.addEventListener('scroll', onScroll, { passive: true });
|
|
sync();
|
|
return () => { view.removeEventListener('scroll', onScroll); doc.documentElement.classList.remove('is-scrolled'); };
|
|
}
|
|
|
|
if (!document.querySelector('#editor')) initScrolled();
|