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

```html
<!-- 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

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

***

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