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).

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.

Last updated