🌊 Natural Sticky Demo

🚀 Mixed Positioning Demo

This demo showcases the new reserveSpace feature of Natural Sticky. The main header above reserves document space (uses sticky/relative positioning), while the floating elements don't reserve space (use fixed/absolute positioning).

Try scrolling up and down to see how different elements behave:

• Main Header: Behaves like a traditional sticky header, reserving document flow space
• Notification Stripe (top): Uses top script, flush to screen top with padding-top: 0
• Floating Button (top-right): Uses top script, positioned with margin, doesn't affect document flow
• Status Indicator (bottom-left): Uses bottom script, demonstrates mixed top/bottom behavior

⚠️ Critical Requirement: The body element must have position: relative for the bottom script to work correctly. Bottom script uses absolute positioning with bottom coordinates, which are calculated from document bottom (with body relative) vs viewport bottom (Initial Containing Block default). Top script works fine either way since document top = ICB top.

🎯 Container-Based Positioning

Each floating element is wrapped in a container that controls positioning and offsets:

• Notification container: padding-top: 0 (flush to screen top)
• Button container: padding-top: var(--button-offset) (dynamically calculated by JavaScript: actual header height + gap)
• Status container: padding-bottom: 20px (above screen bottom with gap)

Key Insight: Apply Natural Sticky to containers, not inner elements. The containers position at top: 0px (top script) or bottom: 0px (bottom script) when sticky, and use padding/flexbox to control inner element placement.

⚠️ Important: Don't use any positioning (position: absolute/fixed/relative/sticky) on inner elements, as it conflicts with the container's positioning changes. Let inner elements follow the container's positioning naturally.

📱 Responsive Design

The floating elements maintain their behavior across different screen sizes. The main header continues to work as expected with document flow, while floating elements operate independently.

This allows for complex layouts where you can have multiple sticky elements without worrying about document flow conflicts.

⚡ Performance Benefits

By using reserveSpace: false for floating elements, you avoid document reflow issues that can occur with multiple sticky elements. This results in smoother animations and better performance.

The floating elements can overlap content or each other as needed, giving you full control over the visual hierarchy with z-index.

🛠️ Implementation Details

The main header uses: naturalStickyTop(element, { reserveSpace: true })

Top floating elements use: naturalStickyTop(element, { reserveSpace: false })

Bottom floating elements use: naturalStickyBottom(element, { reserveSpace: false })

This gives you the flexibility to mix different positioning modes and directions on the same page according to your design needs.

💡 Best Practices

Container-Based Approach:

• Wrap floating elements in container divs
• Apply Natural Sticky to containers, not inner elements
• Use padding-top on top-script containers to control vertical positioning from top
• Use padding-bottom on bottom-script containers to control vertical positioning from bottom
• Use flexbox (justify-content: flex-end) only when you need right alignment
• For left alignment, no flexbox needed - elements align left by default
• Use margin on inner elements for fine spacing control
• ⚠️ Set body { position: relative; } - mandatory for bottom script with reserveSpace: false

⚠️ Avoid These Patterns:

• Don't use any positioning (position: absolute/fixed/relative) on inner elements
• Don't rely on top/right/bottom/left for inner elements
• Don't expect offsetHeight calculations to include container margins

🌊 Scroll Testing Area

This section provides more content for testing scroll behavior.

Keep scrolling to see how all elements behave during different scroll directions and speeds.

📊 Advanced Usage

You can combine this with other options like snapEagerness and scrollThreshold for fine-tuned control over the animation behavior.

Each element can have its own configuration, allowing for diverse behaviors within the same page layout.

🎨 Design Possibilities

With floating elements, you can create:

• Floating action buttons that don't interfere with content flow
• Overlay notifications that appear and hide naturally
• Multiple headers or toolbars without layout conflicts
• Status indicators that float above content
• Social media sharing buttons that follow scroll behavior

🔄 Interactive Elements

All floating elements remain interactive throughout their animations. Try clicking the floating button or interacting with other elements while scrolling to see how they maintain their functionality.

✨ Final Section

This demonstrates a complete implementation of mixed positioning modes in Natural Sticky. The library now supports both traditional sticky behavior and modern floating element patterns.

Scroll back up to see all the behaviors in reverse!