Natural Sticky Library Example
A tiny JavaScript library for smooth hide-on-scroll headers and footers with zero dependencies and natural movement.
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:
[video width="1920" height="1080" mp4="https://www.cssscript.com/wp-content/uploads/2025/08/hide-on-scroll-natural-sticky.mp4"][/video]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 */
}
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.