Littkk ·

Hide and show elements on scroll — works on multiple elements, in any direction, with no classes, no config files, and no framework adapters.

Just add a data-scroll-top (or bottom / left / right) attribute and call littkk()!

Online Demos

https://littkk.tsdk.dev

Attributes

There are two modes, determined by whether the attribute has a value.

Hide mode — no value

Slides the element out of the viewport on scroll down, back in on scroll up. Element must be position: fixed | sticky | absolute.

<header data-scroll-top></header>
<footer data-scroll-bottom></footer>
<nav data-scroll-left></nav>
<aside data-scroll-right></aside>

| Direction | Attribute | Behavior | | --------- | -------------------- | ---------------------------- | | Up | data-scroll-top | slides up out of viewport | | Down | data-scroll-bottom | slides down out of viewport | | Left | data-scroll-left | slides left out of viewport | | Right | data-scroll-right | slides right out of viewport |

Distance mode — CSS value

The element is never hidden. Instead its CSS edge property (top / bottom / left / right) transitions to the given value on scroll down, and reverts on scroll up.

Bare numbers are treated as px. Any CSS unit is accepted.

<!-- top → 0px when scrolled down, reverts when scrolled up -->
<div data-scroll-top="0"></div>

<!-- top → 1rem -->
<div data-scroll-top="1rem"></div>

<!-- multiple axes on the same element -->
<div data-scroll-bottom="0" data-scroll-right="0"></div>

Shared attributes

| Attribute | Values | Default | Applies to | | --------------- | ------ | ------------------------ | -------------- | | data-duration | ms | 300 | both modes | | data-delay | ms | 0 | both modes | | data-offset | px | auto from computed style | hide mode only |

data-delay — ms to wait after scroll stops before executing. Scrolling again resets the timer. Showing is always immediate.

data-offset — overrides the auto-computed slide distance. Useful when getComputedStyle().top/bottom/left/right is unreliable, e.g. with inset shorthand or a pre-existing transform.

Options

littkk({
  scrollTarget: "#my-div", // window (default), HTMLElement, or CSS selector
  threshold: 5, // min px delta before triggering. Default: 5
  showAtTop: true, // force-show all elements when scroll position reaches 0. Default: true
});

Return

export interface LittkkController {
  /** Re-scan DOM and sync new elements to current scroll state. */
  refresh: () => void;
  /** Remove scroll listener and reset all element styles. */
  destroy: () => void;
  /** Set enable or disable */
  setEnable: (enable: boolean) => void;
}

HTML

<header data-scroll-top style="position: fixed; top: 0; width: 100%;">
  ...
</header>

<nav data-scroll-left style="position: fixed; left: 0;">...</nav>

<footer data-scroll-bottom style="position: fixed; bottom: 0; width: 100%;">
  ...
</footer>

<script type="module">
  import { littkk } from "littkk";
  littkk();
</script>

React

import { useEffect } from "react";
import { littkk, LittkkOptions } from "littkk";

function useLittkk(options?: LittkkOptions) {
  useEffect(() => {
    const ctrl = littkk(options);
    return () => ctrl.destroy();
  }, []);
}

export default function App() {
  useLittkk();

  return (
    <>
      <header
        data-scroll-top
        style={{ position: "fixed", top: 0, width: "100%" }}>
        ...
      </header>

      {/* Shifts top to 0 when header hides, reverts when header shows */}
      <main data-scroll-top="0" style={{ position: "fixed", top: 64 }}>
        ...
      </main>
    </>
  );
}

For a scrollable container, pass the ref as scrollTarget. Call ctrl.refresh() after conditionally rendered elements mount.

export default function Feed() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;
    const ctrl = littkk({ scrollTarget: containerRef.current });
    return () => ctrl.destroy();
  }, []);

  return (
    <div ref={containerRef} style={{ height: "100vh", overflowY: "auto" }}>
      <header data-scroll-top style={{ position: "sticky", top: 0 }}>
        ...
      </header>
    </div>
  );
}

Vue

<script setup>
import { onUnmounted } from "vue";
import { littkk } from "littkk";

const ctrl = littkk();
onUnmounted(() => ctrl.destroy());
</script>

<template>
  <header data-scroll-top style="position: fixed; top: 0; width: 100%;">
    ...
  </header>
  <main>...</main>
</template>

For a scrollable container:

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { littkk } from "littkk";

const containerRef = ref(null);
let ctrl;

onMounted(() => {
  ctrl = littkk({ scrollTarget: containerRef.value });
});
onUnmounted(() => ctrl?.destroy());
</script>

<template>
  <div ref="containerRef" style="height: 100vh; overflow-y: auto;">
    <header data-scroll-top style="position: sticky; top: 0;">...</header>
  </div>
</template>

Call ctrl.refresh() after conditionally rendered elements mount — e.g. in a watch or after an async operation.

Projects You May Also Be Interested In

• xior - A tiny but powerful fetch wrapper with plugins support and axios-like API
• tsdk - Type-safe API development CLI tool for TypeScript projects
• broad-infinite-list - ⚡ High performance and Bidirectional infinite scrolling list component for React and Vue3

Reporting Issues

Found an issue? Please feel free to create issue

Support

If you find this project helpful, consider buying me a coffee.