Scrollhide

About

The target gets the scrolled class while hidden, and the overlay class once the page has scrolled past the overlay threshold. Both start from the scroll position the page already has when the component mounts. Movements smaller than the tolerance are ignored, which avoids flicker from elastic scrolling, and a hidden target is shown again when keyboard focus moves into it. Your stylesheet decides what the classes look like.

Usage

Register the component and the framework loads it the first time a page contains [data-scrollhide].

import { Parallelogram } from '@parallelogram-js/core';

const app = Parallelogram.create();
app.components.add('[data-scrollhide]', () => import('@parallelogram-js/core/components/Scrollhide'));
app.run();

The framework is optional. Scrollhide.enhanceAll() mounts the component on every matching element by itself, for a page that wants one enhancement rather than a framework:

import Scrollhide from '@parallelogram-js/core/components/Scrollhide';

Scrollhide.enhanceAll();

It takes a selector and the component's options, and returns the instance it mounted them with. What it leaves out is what the framework adds: loading a component only on the pages that use it, mounting again after a page swap, and ordering with dependsOn.