Smooth Hide-on-scroll Effects for Sticky Headers and Footers – Natural Sticky

Natural Sticky is a lightweight, framework-agnostic JS library that creates natural hide-on-scroll effects for sticky headers and footers.

The library makes sticky elements disappear when you scroll down and reappear when you scroll up, but it does so without the typical animations that can feel disconnected from your actual scroll movement.

We’ve all seen headers that slide, fade, or pop into view. Natural Sticky avoids that entirely. It hooks into the browser’s native scroll behavior, which makes the header or footer move with the content naturally.

Features:

• Ultra-lightweight: Only 1.1KB for top elements, 1.3KB for bottom elements when minified.
• Zero dependencies: Built with pure TypeScript and compiled to vanilla JavaScript.
• Natural scroll synchronization: Movement speed matches user scroll behavior without artificial animations.
• Framework compatibility: Works with React, Vue, Angular, or plain JavaScript projects.
• Modular architecture: Import only the functions you need to minimize bundle size.
• Non-intrusive behavior: Elements appear and disappear smoothly without breaking user focus.

See it in action:

How to use it:

1. Install natural-sticky package and import it with NPM.

# NPM
$ npm install natural-sticky

import { naturalStickyTop, naturalStickyBottom } from 'natural-sticky';

2. For projects without build processes, load the specific script you need:

<!-- For headers -->
<script src="/dist/natural-sticky.top.min.js"></script>
<!-- For footers -->
<script src="/dist/natural-sticky.bottom.min.js"></script>

3. Apply Natural Sticky to your sticky header or footer elements:

const header = document.querySelector('.my-header');
if (header) {
  const headerInstance = naturalStickyTop(header);
  // If you need to clean up later, call destroy()
  // headerInstance.destroy();
}
// without build processes
window.naturalStickyTop(header);
const footer = document.querySelector('.my-footer');
if (footer) {
  const footerInstance = naturalStickyBottom(footer);
  // footerInstance.destroy();
}
// without build processes
window.naturalStickyBottom(footer);

4. Note that the library requires specific margin configurations to function correctly.

Headers must have margin-top: 0 to align with the viewport edge:

.sticky-header {
  margin-top: 0;    /* Required for proper positioning */
  margin-bottom: 20px; /* Other margins can be preserved */
}

Footers require margin-bottom: 0 for bottom-edge alignment:

.sticky-footer {
  margin-bottom: 0;  /* Required for bottom positioning */
  margin-top: 15px;  /* Non-conflicting margins work fine */
}

5. Config the library’s behavior with the following options:

const headerInstance = naturalStickyTop(header,{
  // Controls whether the element reserves space in document flow:
  // true - Traditional sticky behavior (sticky ↔ relative positioning)
  // false - Floating elements (fixed ↔ absolute positioning)
  reserveSpace: true,
  // Gap prevention: 0.0 (natural) to 3.0+ (magnetic)
  snapEagerness: 1.0, 
  // Activation threshold: 0 (always) to 30+ (fast scroll only)
  scrollThreshold: 0, 
  
});

FAQs:

Q: Why do my elements jump or appear in wrong positions?
A: This typically indicates margin conflicts with the positioning calculations. Check that your sticky elements have margin-top: 0 for headers or margin-bottom: 0 for footers. Default browser margins on headings and paragraphs are common culprits.

Q: Can I use Natural Sticky with CSS Grid or Flexbox layouts?
A: Yes, but the sticky element should be a direct child of the grid or flex container rather than nested within grid items. The positioning changes work best when the element can move freely relative to its container without affecting sibling element layouts.

Q: How does performance compare to other hide-on-scroll libraries?
A: Natural Sticky performs better than animation-based libraries because it relies on native browser positioning rather than JavaScript-driven animations.

Q: Can I customize the scroll sensitivity or add delays?
A: The library intentionally avoids scroll thresholds and delays to maintain natural movement.

Q: Does it work with horizontal scrolling or scrollable containers?
A: Natural Sticky focuses specifically on vertical window scrolling. It doesn’t support horizontal scroll effects or elements within scrollable containers other than the main viewport.

Q: How do I handle multiple sticky elements on the same page?

A: Call the appropriate function for each element individually. The library handles multiple instances without conflicts, though be mindful of z-index stacking when elements overlap during transitions.

Related Resources:

• 10 Best Sticky Header Navigation Systems In JavaScript

Changelog:

v1.4.2 (11/24/2025)

• bugfixes

v1.4.1 (10/02/2025)

• reduce bundle size by introducing style setter helpers

v1.4.0 (09/22/2025)

• implement event-based three-state system
• bugfixes

v1.3.0 (08/27/2025)

• add reserveSpace parameter for floating elements and mixed positioning
• implement dynamic button positioning and header padding adjustments
• Bug Fixes

v1.2.0 (08/27/2025)

• add scrollThreshold parameter

v1.1.0 (08/24/2025)

• implement snapEagerness parameter for configurable snap behavior

v1.0.1 (08/21/2025)

• Bugfix