# EuiScrollHandlerElementDirective

**Type:** directive

<p>Directive toggling CSS class on any element when scrolling past a custom threshold.
More flexible alternative to euiScrollHandler with configurable element ID, class, and height.
Monitors window scroll and applies specified class when threshold exceeded.</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;div euiScrollHandlerElement=&quot;myNav&quot;
     toggleClass=&quot;nav-fixed&quot;
     [toggleActiveHeight]=&quot;100&quot;&gt;
  Navigation content
&lt;/div&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Visual feedback for scroll position</li>
<li>Does not affect keyboard navigation or screen readers</li>
<li>Ensure element remains accessible in both states</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Element ID specified via euiScrollHandlerElement input</li>
<li>CSS class specified via toggleClass input</li>
<li>Scroll threshold specified via toggleActiveHeight input (in pixels)</li>
<li>Class added when scroll position exceeds toggleActiveHeight</li>
</ul>


**Selector:** `[euiScrollHandlerElement]`

**Standalone:** false

## Inputs

- **euiScrollHandlerElement**: `string` - 
- **toggleActiveHeight**: `number` - 
- **toggleClass**: `string` - 
