Both Header and Footer Animation
This demo shows both the header and footer with natural sticky behavior simultaneously. While this can be useful in some cases, we generally recommend using them separately to avoid overwhelming the user.
💡 Interactive demo: Click and drag to scroll at any speed you want! Test how both header and footer respond naturally to different scroll patterns.
🎯 Less Distracting by Design
Even with both elements animated, notice how the movement feels natural and non-intrusive. Traditional slide animations would be overwhelming with two animated elements, but our natural approach keeps things smooth and unobtrusive.
When to Use Both Together
Having both animated can work well for:
- Apps with distinct top navigation and bottom action bars
- Media players with top controls and bottom playback controls
- Games or interactive content with UI elements at both ends
However, for content-focused sites, using just one usually provides a cleaner experience.
Complete Implementation Example
document.addEventListener('DOMContentLoaded', () => {
const header = document.querySelector('.sticky-header');
const footer = document.querySelector('.sticky-footer');
if (header && window.naturalStickyTop) {
window.naturalStickyTop(header);
}
if (footer && window.naturalStickyBottom) {
window.naturalStickyBottom(footer);
}
});Ultra lightweight: Combined, both scripts are only 2.2KB minified with zero dependencies.
Both elements work independently - the header logic doesn't interfere with the footer logic and vice versa. Each maintains its own scroll state and positioning calculations.
The Natural Approach
Instead of using CSS transitions or JavaScript animations, we let the browser's native scrolling do all the work. When you scroll down, elements naturally flow with the content. When you scroll up, we position them just outside the viewport so they naturally scroll back into view.
Try scrolling in different patterns - fast, slow, short scrolls, long scrolls - to see how both elements respond naturally to your input.
Notice how there's no jarring slide-in effect, no fixed animation timing that doesn't match your scroll speed, and no layout shifts. The movement feels completely organic.