### Install StickyState with npm

Source: https://github.com/soenkekluth/sticky-state/blob/master/README.md

Use npm to install the sticky-state package.

```bash
npm install sticky-state
```

--------------------------------

### Initialization with Options

Source: https://github.com/soenkekluth/sticky-state/blob/master/README.md

Configure StickyState with custom options during instantiation to control its behavior and appearance.

```APIDOC
## Initialization with Options

### Description
Configure StickyState with custom options during instantiation to control its behavior and appearance.

### Method
```javascript
new StickyState(selector, options)
```

### Parameters
#### Path Parameters
- **selector** (string) - Required - A CSS selector string to target the elements that should have sticky behavior applied.
- **options** (object) - Optional - An object containing configuration properties for StickyState.

#### Options Object Properties
- **disabled** (boolean) - `false` - Disable or enable the sticky feature initially.
- **className** (string) - `'sticky'` - The core class that should match the CSS.
- **stateClassName** (string) - `'is-sticky'` - The state class applied when the element is actually sticky.
- **fixedClass** (string) - `'sticky-fixed'` - The fallback class using `position:fixed`.
- **wrapperClass** (string) - `'sticky-wrap'` - The fallback polyfill version needs a placeholder.
- **wrapFixedSticky** (boolean) - `true` - Whether the sticky element should be wrapped by the placeholder.
- **absoluteClass** (string) - `'is-absolute'` - The polyfilled sticky element needs `position:absolute` in some cases.
- **scrollClass** (object) - An object to configure scroll direction classes:
  - **down** (string | null) - Class to add when scrolling down.
  - **up** (string | null) - Class to add when scrolling up.
  - **none** (string | null) - Class to add when scrolling stops.
  - **persist** (boolean) - `false` - Whether the scroll class should persist after scrolling stops.

### Request Example
```javascript
var StickyState = require('sticky-state');

var stickyOptions = {
  disabled: false,
  className: 'sticky',
  stateClassName: 'is-sticky',
  fixedClass: 'sticky-fixed',
  wrapperClass: 'sticky-wrap',
  wrapFixedSticky: true,
  absoluteClass: 'is-absolute',
  scrollClass: {
    down: 'scroll-down',
    up: 'scroll-up',
    none: null,
    persist: false
  }
};

var stickyElements = new StickyState(document.querySelectorAll('.sticky'), stickyOptions);
```

### Response
#### Success Response
Returns an instance of StickyState configured with the provided options.
```

--------------------------------

### options - Configuration Object

Source: https://context7.com/soenkekluth/sticky-state/llms.txt

All available constructor options with their defaults, allowing customization of StickyState's behavior and class names.

```APIDOC
## options - Configuration Object

### Description
All available constructor options with their defaults.

### Parameters
#### Request Body
- **disabled** (boolean) - Optional - Start disabled (no sticky behavior). Defaults to `false`.
- **className** (string) - Optional - CSS class that marks an element as sticky. Defaults to `'sticky'`.
- **stateClassName** (string) - Optional - Class added when element is in sticky state. Defaults to `'is-sticky'`.
- **fixedClass** (string) - Optional - Class added in polyfill mode (position:fixed). Defaults to `'sticky-fixed'`.
- **wrapperClass** (string) - Optional - Class for the placeholder wrapper in polyfill mode. Defaults to `'sticky-wrap'`.
- **wrapFixedSticky** (boolean) - Optional - Wrap element in placeholder (true) or insert before it (false). Defaults to `true`.
- **absoluteClass** (string) - Optional - Class added when element switches to position:absolute. Defaults to `'is-absolute'`.
- **scrollClass** (Object) - Optional - Adds direction-aware classes while element is sticky.
  - **down** (string | null) - Class added while scrolling down and sticky. Defaults to `'scroll-down'`.
  - **up** (string | null) - Class added while scrolling up and sticky. Defaults to `'scroll-up'`.
  - **none** (string | null) - Class added when scroll stops (optional). Defaults to `null`.
  - **persist** (boolean) - If true, direction class stays after scrolling stops. Defaults to `false`.

### Request Example
```javascript
var StickyState = require('sticky-state');

var options = {
  disabled: false,
  className: 'sticky',
  stateClassName: 'is-sticky',
  fixedClass: 'sticky-fixed',
  wrapperClass: 'sticky-wrap',
  wrapFixedSticky: true,
  absoluteClass: 'is-absolute',
  scrollClass: {
    down: 'scroll-down',
    up: 'scroll-up',
    none: null,
    persist: false
  }
};

new StickyState(document.querySelectorAll('.sticky'), options);
```
```

--------------------------------

### Basic Initialization

Source: https://github.com/soenkekluth/sticky-state/blob/master/README.md

Instantiate StickyState with a selector to apply sticky behavior to multiple elements.

```APIDOC
## Basic Initialization

### Description
Instantiate StickyState with a selector to apply sticky behavior to multiple elements.

### Method
```javascript
new StickyState(selector)
```

### Parameters
#### Path Parameters
- **selector** (string) - Required - A CSS selector string to target the elements that should have sticky behavior applied.

### Request Example
```javascript
var StickyState = require('sticky-state');
new StickyState(document.querySelectorAll('.sticky'));
```

### Response
#### Success Response
Returns an instance of StickyState that can be used to interact with the sticky elements.
```

--------------------------------

### StickyState Initialization with Options

Source: https://github.com/soenkekluth/sticky-state/blob/master/README.md

Instantiate StickyState with custom options to control its behavior, such as class names and initial state.

```javascript
var StickyState = require('sticky-state');

// the props you can set (except scrollClass this shows the default options):



var stickyOptions = {
  disabled: false, // disable or enable the sticky feature initially
  className: 'sticky', // the core class which should be equal to the css. see above.
  stateClassName: 'is-sticky',  // the state class, when the element is actually sticky
  fixedClass: 'sticky-fixed',  // the fallback class that uses position:fixed to make the element sticky 
  wrapperClass: 'sticky-wrap', // the fallback (polyfilled) version needs a placeholder that uses the space of the actual sticky element when its position:fixed
  wrapFixedSticky: true,  // by default the sticky element gets wrapped by the placeholder. if you set it to false it will be inserted right before it.
  absoluteClass: 'is-absolute',  // the polyfilled sticky element needs to be position:absolut in some cases.
  
  // scrollclass will add a class to the sticky element that is depending on the scroll direction when the element is sticky.
  // when the scrolling stops the class will be the value of "none" unless you set "persist" to true.
  
  scrollClass: {
    down: null,
    up: null,
    none: null,
    persist: false
  }
};

// instantiate with options
var stickyElements = new StickyState(document.querySelectorAll('.sticky'), stickyOptions);
```

--------------------------------

### new StickyState(element, options)

Source: https://context7.com/soenkekluth/sticky-state/llms.txt

Creates a StickyState instance for one or more elements. When passed a NodeList, it initializes all matched elements and returns a StickyStateCollection. The `top` or `bottom` CSS property on the element determines whether it sticks to the top or bottom of the viewport.

```APIDOC
## new StickyState(element, options)

### Description
Creates a StickyState instance for one or more elements. When passed a `NodeList`, it initializes all matched elements and returns a `StickyStateCollection`. The `top` or `bottom` CSS property on the element determines whether it sticks to the top or bottom of the viewport.

### Parameters
#### Path Parameters
- **element** (Element | NodeList) - Required - The DOM element or NodeList to apply sticky state to.
- **options** (Object) - Optional - Configuration options for StickyState.

### Request Example
```javascript
var StickyState = require('sticky-state');

// Single element
var header = new StickyState(document.querySelector('.sticky-header'));

// Multiple elements via NodeList — returns StickyStateCollection
var allSticky = new StickyState(document.querySelectorAll('.sticky'));

// Check native support
if (StickyState.native) {
  console.log('Native position:sticky is supported — state classes will be added.');
} else {
  console.log('Polyfill is active — position:fixed fallback in use.');
}
```
```

--------------------------------

### Basic StickyState Initialization

Source: https://github.com/soenkekluth/sticky-state/blob/master/README.md

Initialize StickyState for all elements with the class 'sticky'. This is the most basic usage.

```javascript
var StickyState = require('sticky-state');
new StickyState(document.querySelectorAll('.sticky'));
//  all elements with class .sticky will have sticky state:
```

--------------------------------

### Basic StickyState Instantiation

Source: https://context7.com/soenkekluth/sticky-state/llms.txt

Initialize StickyState for single or multiple elements. The `top` or `bottom` CSS property determines stickiness. Use `document.querySelector` for a single element or `document.querySelectorAll` for multiple.

```html
<!-- HTML -->
<div class="sticky" style="top: 0;">
  I am a sticky header
</div>

<div class="sticky" style="bottom: 0;">
  I am a sticky footer
</div>
```

```javascript
var StickyState = require('sticky-state');

// Single element
var header = new StickyState(document.querySelector('.sticky-header'));

// Multiple elements via NodeList — returns StickyStateCollection
var allSticky = new StickyState(document.querySelectorAll('.sticky'));

// Check native support
if (StickyState.native) {
  console.log('Native position:sticky is supported — state classes will be added.');
} else {
  console.log('Polyfill is active — position:fixed fallback in use.');
}
```

--------------------------------

### StickyState Configuration Options

Source: https://context7.com/soenkekluth/sticky-state/llms.txt

Customize StickyState behavior using the options object. Defaults are provided for all available settings.

```javascript
var StickyState = require('sticky-state');

var options = {
  disabled: false,             // Start disabled (no sticky behavior)
  className: 'sticky',         // CSS class that marks an element as sticky
  stateClassName: 'is-sticky', // Class added when element is in sticky state
  fixedClass: 'sticky-fixed',  // Class added in polyfill mode (position:fixed)
  wrapperClass: 'sticky-wrap', // Class for the placeholder wrapper in polyfill mode
  wrapFixedSticky: true,       // Wrap element in placeholder (true) or insert before it (false)
  absoluteClass: 'is-absolute',// Class added when element switches to position:absolute

  // Adds direction-aware classes while element is sticky
  scrollClass: {
    down: 'scroll-down',  // Class added while scrolling down and sticky
    up: 'scroll-up',      // Class added while scrolling up and sticky
    none: null,           // Class added when scroll stops (optional)
    persist: false        // If true, direction class stays after scrolling stops
  }
};

new StickyState(document.querySelectorAll('.sticky'), options);
```

--------------------------------

### Initialize StickyState

Source: https://github.com/soenkekluth/sticky-state/blob/master/examples/simple.html

Instantiate StickyState by passing a CSS selector to target elements. This initializes the sticky behavior for the selected elements.

```javascript
new StickyState(document.querySelectorAll('.sticky'));
```

--------------------------------

### Initialize Sticky State with Basic Selector

Source: https://github.com/soenkekluth/sticky-state/blob/master/examples/horizontal.html

Initialize StickyState with a simple element selector. This applies default sticky behavior to the selected element.

```javascript
new StickyState(document.querySelector('.left-headline'));
```

--------------------------------

### Initialize StickyState with Elements

Source: https://github.com/soenkekluth/sticky-state/blob/master/examples/index.html

Initializes StickyState for elements with the class 'sticky'. It logs whether native position:sticky is supported or if a polyfill is used. It also sets up event listeners for sticky state changes.

```javascript
console.log(StickyState);
var out = StickyState.native ? 'native position:sticky supported. state is added' : 'position:sticky is polyfilled';
document.querySelector('#output').innerText = out;
function onStickyChange(e) {
  if(console){
    console.log(e.type , e.target.id);
  }
};
new StickyState(document.querySelectorAll('.sticky'), {
  scrollClass:{ down: 'sticky-scroll-down', up: 'sticky-scroll-up' }
})
.on('sticky:on', onStickyChange) 
// .on('sticky:off', onStickyChange);
```

--------------------------------

### Event Handling

Source: https://github.com/soenkekluth/sticky-state/blob/master/README.md

Listen for 'sticky:on' and 'sticky:off' events to react when an element becomes sticky or stops being sticky.

```APIDOC
## Event Handling

### Description
Listen for 'sticky:on' and 'sticky:off' events to react when an element becomes sticky or stops being sticky.

### Method
```javascript
instance.on(event, handler)
```

### Parameters
#### Path Parameters
- **event** (string) - Required - The name of the event to listen for. Supported events are 'sticky:on' and 'sticky:off'.
- **handler** (function) - Required - The callback function to execute when the event is triggered. The function receives an event object with a `target` property.

### Request Example
```javascript
var StickyState = require('sticky-state');
new StickyState(document.querySelectorAll('.sticky'))
  .on('sticky:on', function(e){
    console.log('sticky:on', e.target);
  })
  .on('sticky:off', function(e){
    console.log('sticky:off', e.target);
  });
```

### Response
#### Success Response
Returns the StickyState instance, allowing for method chaining.
```

--------------------------------

### Initialize Headroom with Scroll Classes

Source: https://github.com/soenkekluth/sticky-state/blob/master/examples/headroom.html

Instantiate Headroom with custom CSS classes for scroll direction. Use 'headroom-scroll-down' when scrolling down and 'headroom-scroll-up' when scrolling up. The 'persist' option ensures the classes remain after the scroll stops.

```javascript
new StickyState(document.querySelector('.headroom'), {
  scrollClass: { down: 'headroom-scroll-down', up: 'headroom-scroll-up', persist: true }
});
```

--------------------------------

### `StickyState.apply(elements, options)` — Static Factory

Source: https://context7.com/soenkekluth/sticky-state/llms.txt

A static alternative to the constructor for applying StickyState to a set of elements. This method returns a `StickyStateCollection` when given multiple elements, or a single `StickyState` instance for one element.

```APIDOC
## `StickyState.apply(elements, options)` — Static Factory

Static alternative to the constructor for applying StickyState to a set of elements. Returns a `StickyStateCollection` when given multiple elements, or a single `StickyState` instance for one element.

```javascript
var StickyState = require('sticky-state');

// Equivalent to: new StickyState(document.querySelectorAll('.sticky'), options)
var collection = StickyState.apply(
  document.querySelectorAll('.sticky'),
  { scrollClass: { down: 'scroll-down', up: 'scroll-up' } }
);

// StickyStateCollection supports .update(), .addListener(), .removeListener()
collection.update();

collection.addListener('sticky:on', function(e) {
  console.log('A sticky element became sticky:', e.target);
});
```
```

--------------------------------

### Initialize Sticky State with Scroll Classes

Source: https://github.com/soenkekluth/sticky-state/blob/master/examples/horizontal.html

Instantiate StickyState with a selector and configure scroll-related CSS classes for 'down' and 'up' states. The 'persist' option ensures the class remains after scrolling stops.

```javascript
new StickyState(document.querySelector('.headroom'), { scrollClass:{ down: 'headroom-scroll-down', up: 'headroom-scroll-up', persist: true } });
```

--------------------------------

### Static Factory with `StickyState.apply()`

Source: https://context7.com/soenkekluth/sticky-state/llms.txt

Use the static `StickyState.apply()` method as an alternative to the constructor for applying StickyState to a set of elements. It returns a `StickyStateCollection` for multiple elements or a single `StickyState` instance for one element. The collection supports methods like `.update()`, `.addListener()`, and `.removeListener()`.

```javascript
var StickyState = require('sticky-state');

// Equivalent to: new StickyState(document.querySelectorAll('.sticky'), options)
var collection = StickyState.apply(
  document.querySelectorAll('.sticky'),
  { scrollClass: { down: 'scroll-down', up: 'scroll-up' } }
);

// StickyStateCollection supports .update(), .addListener(), .removeListener()
collection.update();

collection.addListener('sticky:on', function(e) {
  console.log('A sticky element became sticky:', e.target);
});
```

--------------------------------

### Include StickyState Directly in HTML

Source: https://context7.com/soenkekluth/sticky-state/llms.txt

Include the StickyState CSS and JavaScript files directly in your HTML for use.

```html
<!-- Direct include -->
<link rel="stylesheet" href="dist/sticky-state.css">
<script src="dist/sticky-state.min.js"></script>
```

--------------------------------

### StickyState Event Handling

Source: https://github.com/soenkekluth/sticky-state/blob/master/README.md

Attach event listeners to StickyState instances to react to 'sticky:on' and 'sticky:off' events, logging the target element.

```javascript
var StickyState = require('sticky-state');
new StickyState(document.querySelectorAll('.sticky'))
  .on('sticky:on', function(e){console.log('sticky:on', e.target);})
  .on('sticky:off', function(e){console.log('sticky:off' ,e.target);});

```

--------------------------------

### Force Recalculation with `update()`

Source: https://context7.com/soenkekluth/sticky-state/llms.txt

Manually trigger a full recalculation of bounds and sticky state using the `update()` method. This is essential after dynamic content changes, AJAX-loaded content, or programmatic layout shifts that do not fire a resize event. Alternatively, dispatch the global `sticky:update` event.

```javascript
var StickyState = require('sticky-state');

var sticky = new StickyState(document.querySelectorAll('.sticky'));

// After dynamically inserting content that changes page height:
fetch('/api/content')
  .then(function(res) { return res.json(); })
  .then(function(data) {
    document.querySelector('#dynamic-section').innerHTML = data.html;
    // Recalculate all sticky positions since layout changed
    sticky.update();
  });

// Alternatively, dispatch the global sticky:update event
// to trigger recalculation on all StickyState instances:
window.dispatchEvent(new Event('sticky:update'));
```

--------------------------------

### Enable/Disable Sticky Behavior at Runtime with `disable()`

Source: https://context7.com/soenkekluth/sticky-state/llms.txt

The `disable()` method allows enabling or disabling sticky behavior on an instance after initialization without destroying it. This is useful for responsive designs, such as disabling sticky behavior on smaller viewports.

```javascript
var StickyState = require('sticky-state');

var sticky = new StickyState(document.querySelector('#my-banner'));

// Disable sticky behavior (e.g., on mobile breakpoint)
sticky.disable(true);

// Re-enable it
sticky.disable(false);

// Example: toggle based on viewport width
window.addEventListener('resize', function() {
  sticky.disable(window.innerWidth < 768);
});
```

--------------------------------

### StickyState Event Handling

Source: https://context7.com/soenkekluth/sticky-state/llms.txt

Listen for `sticky:on` and `sticky:off` events dispatched on the element itself. These events signal when an element enters or leaves its sticky state.

```javascript
var StickyState = require('sticky-state');

new StickyState(document.querySelectorAll('.sticky'))
  .on('sticky:on', function(e) {
    console.log('Element became sticky:', e.target.id);
    // e.target is the DOM element that entered sticky state
  })
  .on('sticky:off', function(e) {
    console.log('Element left sticky state:', e.target.id);
  });

// Expected console output when scrolling past a header:
// Element became sticky: site-header
// Element left sticky state: site-header
```

--------------------------------

### sticky:on / sticky:off Events

Source: https://context7.com/soenkekluth/sticky-state/llms.txt

StickyState emits `sticky:on` when an element becomes sticky and `sticky:off` when it leaves the sticky state. These events are dispatched on the element itself and can be listened to using the `.on()` method.

```APIDOC
## sticky:on / sticky:off Events

### Description
StickyState emits `sticky:on` when an element becomes sticky and `sticky:off` when it leaves the sticky state. Events are dispatched on the element itself and available via `.on()` chaining.

### Parameters
#### Event Parameters
- **e** (Event) - The event object.
  - **target** (Element) - The DOM element that entered or left the sticky state.

### Request Example
```javascript
var StickyState = require('sticky-state');

new StickyState(document.querySelectorAll('.sticky'))
  .on('sticky:on', function(e) {
    console.log('Element became sticky:', e.target.id);
    // e.target is the DOM element that entered sticky state
  })
  .on('sticky:off', function(e) {
    console.log('Element left sticky state:', e.target.id);
  });

// Expected console output when scrolling past a header:
// Element became sticky: site-header
// Element left sticky state: site-header
```
```

--------------------------------

### `update()` — Force Recalculation

Source: https://context7.com/soenkekluth/sticky-state/llms.txt

Manually triggers a full recalculation of bounds and sticky state. This method is essential after dynamic content changes, AJAX-loaded content, or programmatic layout shifts that do not fire a resize event.

```APIDOC
## `update()` — Force Recalculation

Manually triggers a full recalculation of bounds and sticky state. Useful after dynamic content changes, AJAX-loaded content, or programmatic layout shifts that do not fire a resize event.

```javascript
var StickyState = require('sticky-state');

var sticky = new StickyState(document.querySelectorAll('.sticky'));

// After dynamically inserting content that changes page height:
fetch('/api/content')
  .then(function(res) { return res.json(); })
  .then(function(data) {
    document.querySelector('#dynamic-section').innerHTML = data.html;
    // Recalculate all sticky positions since layout changed
    sticky.update();
  });

// Alternatively, dispatch the global sticky:update event
// to trigger recalculation on all StickyState instances:
window.dispatchEvent(new Event('sticky:update'));
```
```

--------------------------------

### StickyState CSS Structure

Source: https://github.com/soenkekluth/sticky-state/blob/master/README.md

Essential CSS rules for StickyState to function correctly. Ensure these classes are present in your stylesheet.

```css
.sticky {
  position: -webkit-sticky;
  position: sticky;
}

.sticky.sticky-fixed.is-sticky {
  position: fixed;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.sticky.sticky-fixed.is-sticky:not([style*="margin-top"]) {
  margin-top: 0 !important;
}
.sticky.sticky-fixed.is-sticky:not([style*="margin-bottom"]) {
  margin-bottom: 0 !important;
}

.sticky.sticky-fixed.is-absolute{
  position: absolute;
}

```

--------------------------------

### `disable(value)` — Enable / Disable at Runtime

Source: https://context7.com/soenkekluth/sticky-state/llms.txt

Enables or disables the sticky behavior on an instance after initialization without destroying it. This is useful for dynamically toggling sticky elements based on conditions like viewport width.

```APIDOC
## `disable(value)` — Enable / Disable at Runtime

Enables or disables the sticky behavior on an instance after initialization without destroying it.

```javascript
var StickyState = require('sticky-state');

var sticky = new StickyState(document.querySelector('#my-banner'));

// Disable sticky behavior (e.g., on mobile breakpoint)
sticky.disable(true);

// Re-enable it
sticky.disable(false);

// Example: toggle based on viewport width
window.addEventListener('resize', function() {
  sticky.disable(window.innerWidth < 768);
});
```
```

--------------------------------

### Cleanup with `destroy()`

Source: https://context7.com/soenkekluth/sticky-state/llms.txt

Call the `destroy()` method to remove all scroll and resize listeners and release internal references. This is crucial when removing sticky elements from the DOM to prevent memory leaks.

```javascript
var StickyState = require('sticky-state');

var sticky = new StickyState(document.querySelector('#modal-header'));

// When the modal is closed and removed from DOM:
function closeModal() {
  sticky.destroy();
  document.querySelector('#modal').remove();
}
```

--------------------------------

### `destroy()` — Cleanup

Source: https://context7.com/soenkekluth/sticky-state/llms.txt

Removes all scroll and resize listeners and releases internal references. It is crucial to call this method when removing sticky elements from the DOM to prevent memory leaks.

```APIDOC
## `destroy()` — Cleanup

Removes all scroll and resize listeners and releases internal references. Call this when removing sticky elements from the DOM to prevent memory leaks.

```javascript
var StickyState = require('sticky-state');

var sticky = new StickyState(document.querySelector('#modal-header'));

// When the modal is closed and removed from DOM:
function closeModal() {
  sticky.destroy();
  document.querySelector('#modal').remove();
}
```
```

--------------------------------

### Required CSS for Sticky Elements

Source: https://context7.com/soenkekluth/sticky-state/llms.txt

These CSS rules are necessary for StickyState to function correctly, including base styles and polyfill adjustments.

```css
/* Required base styles for sticky elements */
.sticky {
  position: -webkit-sticky;
  position: sticky;
}

/* Polyfill: applied when native sticky is unavailable */
.sticky.sticky-fixed.is-sticky {
  position: fixed;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.sticky.sticky-fixed.is-sticky:not([style*="margin-top"]) {
  margin-top: 0 !important;
}

.sticky.sticky-fixed.is-sticky:not([style*="margin-bottom"]) {
  margin-bottom: 0 !important;
}

.sticky.sticky-fixed.is-absolute {
  position: absolute;
}
```

--------------------------------

### Sticky Element within an Overflow Container

Source: https://context7.com/soenkekluth/sticky-state/llms.txt

StickyState automatically detects if the scroll parent is an overflow container rather than the window. It adjusts fixed offset calculations accordingly, ensuring the element sticks to the top of the scroll container as it scrolls, not the browser viewport. No special configuration is needed.

```html
<div class="scroll-container" style="height: 400px; overflow: auto;">
  <p>Some content...</p>
  <div class="sticky" style="top: 0;">
    Sticky inside overflow container
  </div>
  <div style="height: 1000px;"></div>
</div>
```

```javascript
var StickyState = require('sticky-state');

// No special configuration needed — scroll parent is detected automatically
new StickyState(document.querySelector('.scroll-container .sticky'));

// The element will stick to the top of .scroll-container as it scrolls,
// not the browser viewport.
```

--------------------------------

### Add Scroll Direction Classes with `scrollClass` Option

Source: https://context7.com/soenkekluth/sticky-state/llms.txt

Use the `scrollClass` option to add CSS classes to sticky elements based on scroll direction. This enables patterns like hiding a sticky header when scrolling down. The `persist: true` option keeps the last direction class active after scrolling stops.

```html
<header class="sticky headroom" style="top: 0;">Site Header</header>
```

```css
/* Hide header when scrolling down while sticky */
.headroom.is-sticky.scroll-down {
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}
.headroom.is-sticky.is-sticky.scroll-up {
  transform: translateY(0);
  transition: transform 0.3s ease;
}
```

```javascript
var StickyState = require('sticky-state');

// persist: true keeps the direction class active after scrolling stops
new StickyState(document.querySelector('.headroom'), {
  scrollClass: {
    down: 'scroll-down',
    up: 'scroll-up',
    persist: true
  }
});
// Result: .headroom gains .scroll-down while scrolling down in sticky state,
// .scroll-up while scrolling up, and retains last direction class when stopped.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.