# core/observers/tab.observer.ts

> 17 lines of code and 4 definitions.

Tree: Site tree
Language: typescript
Layer: application
Canonical: https://banes-lab.com/anatomy/tree#file-core-observers-tab-observer-ts
Source text: https://banes-lab.com/assets/sources/source.ca1f088ce83ce782c5aebd19c52f9b423e938078cf9edd2d81f7ede2fabdd47d.generated.txt

## Definitions

- `observePin` (lexical_declaration, line 4, exported)
- `threshold` (lexical_declaration, line 5, exported)
- `measured` (lexical_declaration, line 6, exported)
- `onScroll` (lexical_declaration, line 7, exported)

## Used by

- [presentation/renderers/tab.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/tab.renderer.ts.md)

## Source

```typescript
import { PINNED_CLASS, PIN_OFFSET_PX } from "#configuration/constants/tab.constants";
import type { Disposer } from "#types/base.types";

export const observePin = function observePin(scroller: HTMLElement, anchor: HTMLElement, tabs: HTMLElement): Disposer {
    let threshold = 0;
    let measured = false;
    const onScroll = function onScroll(): void {
        if (!measured && anchor.isConnected) {
            threshold = anchor.offsetTop - PIN_OFFSET_PX;
            measured = true;
        }
        tabs.classList.toggle(PINNED_CLASS, measured && scroller.scrollTop > threshold);
    };
    scroller.addEventListener("scroll", onScroll, { passive: true });
    return () => {
        scroller.removeEventListener("scroll", onScroll);
    };
};
```