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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.nickarce.com/customization/publish-your-docs/header-element.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.