· Standard
N
Community-Eintrag
llms.txt erreichbar
KI-Impact-Score 90/100 · A
Natural Sticky stellt strukturierte Informationen über eine llms.txt-Datei für KI-Assistenten bereit. Branche: Entwickler-Tools / Dokumentation & Wissensdatenbank. Die Website github.kadykov.com stellt ihre llms.txt unter https://github.kadykov.com/natural-sticky/llms.txt bereit. Der Eintrag besteht seit 06. April 2026.
Geschäftskategorie
Entwickler-Tools
Eingetragen seit
llms.txt-Adresse
Beschreibung
A lightweight, framework-agnostic NPM package for natural hide-on-scroll effects for headers, footers, or floating elements. It uses smart position switching instead of animations, so elements move naturally with the user's scroll speed. Abschnitte: Basic Usage, Documentation, Minimal Demos.
Online-Präsenz
Gemäß DSGVO Art. 17 kannst du die Löschung deiner Daten beantragen.
llms.txt — Aktueller Inhalt
Öffnen ↗
# Natural Sticky
> A lightweight, framework-agnostic NPM package for natural hide-on-scroll effects for headers, footers, or floating elements. It uses smart position switching instead of animations, so elements move naturally with the user's scroll speed.
The package is ultra-lightweight (1.2-1.3KB), has no dependencies, and is event-driven for creating dynamic interfaces. It supports multiple elements on the same page without conflicts. Behavior can be fine-tuned with three parameters: `reserveSpace` (positioning mode), `snapEagerness` (gap prevention), and `scrollThreshold` (activation speed).
## Basic Usage
**1. Installation**
```bash
npm install natural-sticky
```
**2. Quick Start**
You can either import it as a module or use the CDN.
*NPM Module:*
```javascript
import { naturalStickyTop, naturalStickyBottom } from 'natural-sticky';
const headerInstance = naturalStickyTop(document.querySelector('.header'));
const footerInstance = naturalStickyBottom(document.querySelector('.footer'));
// Clean up when the component unmounts
// headerInstance.destroy();
// footerInstance.destroy();
```
*CDN:*
```html
<!-- For headers -->
<script src="https://cdn.jsdelivr.net/npm/natural-sticky/dist/natural-sticky.top.min.js"></script>
<script>
window.naturalStickyTop(document.querySelector('.header'));
</script>
<!-- For footers -->
<script src="https://cdn.jsdelivr.net/npm/natural-sticky/dist/natural-sticky.bottom.min.js"></script>
<script>
window.naturalStickyBottom(document.querySelector('.footer'));
</script>
```
## Documentation
- [README](https://github.com/kadykov/natural-sticky/blob/main/README.md): The main project documentation with detailed explanations of configuration, events, and CSS requirements.
## Minimal Demos
These demos showcase core features with minimal styling, intended for developer reference.
- [Basic Header](https://github.kadykov.com/natural-sticky/demo/minimal-header.html): A simple sticky header.
- [Header with Events](https://github.kadykov.com/natural-sticky/demo/minimal-header-events.html): A header that changes style based on scroll events.
- [Floating Header](https://github.kadykov.com/natural-sticky/demo/minimal-header-floating.html): A header that does not affect the document flow.
- [Basic Footer](https://github.kadykov.com/natural-sticky/demo/minimal-footer.html): A simple sticky footer.
- [Footer with Events](https://github.kadykov.com/natural-sticky/demo/minimal-footer-events.html): A footer that responds to scroll events.
- [Floating Footer](https://github.kadykov.com/natural-sticky/demo/minimal-footer-floating.html): A footer that floats over the content.
- [Header Style on Scroll](https://github.kadykov.com/natural-sticky/demo/minimal-header-style-on-scroll.html): A header that changes style when scrolling down.