Header (Element)

The Header component provides functionality for sticky behavior, hide-on-scroll effects, and accessibility features like skip links. It is configured primarily through data attributes on the header element.

Example HTML of the header:

The .header-wrapper is to be treated like an invisible container not meant for styling but for functionality. Styling should be delegated to the .header when needed.

<!-- Invisible container used for behavior and interaction -->
<header class="header-wrapper" 
        data-sticky-header="true" 
        data-hide-on-scroll="true" 
        data-hide-at="200" 
        data-show-on-scroll-up="true"
        data-skip-link="true">
        <!-- Your actual header for content and styling -->
        <div class="header">  
                <!-- Header Content -->
        </div>
</header>

Data Attributes Configuration

Attribute	Type	Default	Description
data-sticky-header	boolean	false	When set to "true", enables the sticky header logic, including scroll-based class toggling.
data-hide-on-scroll	boolean	false	When set to "true", allows the header to be hidden on the user scrolling down the page.
data-show-on-scroll-up	boolean	false	If "true", the header will hide when scrolling down and reappear as soon as the user scrolls up. If "false", the header stays hidden once past the threshold. This requires: data-hide-on-scroll="true"
data-hide-at	number	200px	The pixel threshold (scroll distance from top) before the hiding logic is activated. This requires: data-hide-on-scroll="true"
data-skip-link	boolean	false	When set to "true", automatically injects an accessible "Skip to main content" link at the start of the header targeting the <main> element.

---

Behavioral Details

CSS Variables

The script automatically calculates the header height and sets a global CSS variable:

• --header-height: Updated on load, resize, and content changes using ResizeObserver.

• This allows you to use this variable site wide and integrates with ACSS without needing to manually enter these values.

State Classes

The component toggles the following classes on the .header-wrapper element:

• .scrolling: Added when the window is scrolled more than 0px from the top. Use this for adding shadows or reducing padding on scroll.

• .hide: Added when the scroll logic determines the header should be hidden.

Hide Logic Modes

1. Static Hide (default):

   • Requires: data-hide-on-scroll="true" and data-hide-at="[threshold]".

   • Behavior: Header hides once you scroll past the threshold and stays hidden.

2. Responsive Hide (Scroll Up):

   • Requires: data-hide-on-scroll="true", data-hide-at="[threshold]", and data-show-on-scroll-up="true".

   • Behavior: Header hides past the threshold when scrolling down. It immediately reappears when the user scrolls back up (with a 5px tolerance).

Skip Link

If data-skip-link="true" is set:

• An <a> tag with class .skip-link is prepended to the header.

• The first <main> element on the page is automatically given id="main" if it doesn't have one.