Events Demo - Natural Sticky

🎉 Natural Sticky Event System

Events change everything. Instead of just having a sticky element that works in isolation, you now have a state-aware component that your entire application can respond to. The header above demonstrates this perfectly - it changes not just color, but also shadow effects and transparency based on its current state.

💡 Watch the header as you scroll! Notice how it doesn't just change color - it also transitions shadow effects and becomes semi-transparent during transitions. This demonstrates the power of CSS combined with event-driven state changes.

🚀 What Makes Events Game-Changing

Before the event system, sticky elements were "black boxes". You could make them stick, but you couldn't easily react to how or when they were sticking. Now, every state transition is an opportunity to create richer, more responsive interfaces.

🏠 HOME State

Orange with Subtle Shadow: The element is at its natural position. Perfect for showing full branding, complete navigation menus, or detailed information.

🔄 RELATIVE State

Blue with Semi-Transparency: The element is in transition. Great for loading indicators, progress bars, or subtle visual feedback during movement.

📌 STICKY State

Teal with Prominent Glow: The element is actively sticky. Ideal for condensed navigation, key actions, or status indicators.

📝 The Complete Implementation Guide

Let's walk through exactly how to implement the event system, from basic setup to advanced customizations. The beauty is in its simplicity - just a few lines of code unlock powerful capabilities.

🔧 Step 1: Basic Setup

<!-- Your HTML -->
<header id="myHeader">
  <h1>My Awesome Header</h1>
</header>

<script src="natural-sticky.top.min.js"></script>
<script>
// Initialize with Natural Sticky
const header = document.getElementById('myHeader');
naturalStickyTop(header, {
  scrollThreshold: 10,  // Optional: minimum scroll speed
  snapEagerness: 1      // Optional: how eagerly it snaps to sticky
});
</script>

🎨 Step 2: Add Event Listener

// Listen for state changes
header.addEventListener('natural-sticky', (event) => {
  const currentState = event.detail.state; // 'home', 'sticky', or 'relative'
  
  console.log(`Header changed to: ${currentState}`);
  
  // Remove previous state classes
  header.classList.remove('state-home', 'state-sticky', 'state-relative');
  
  // Add current state class
  header.classList.add(`state-${currentState}`);
  
  // Update text content
  const statusElement = header.querySelector('.status');
  if (statusElement) {
    statusElement.textContent = `Current: ${currentState.toUpperCase()}`;
  }
});

🎭 Step 3: Style the States

/* CSS for different states */
#myHeader {
  transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Base shadow for all states */
}

/* Home state - natural position */
#myHeader.state-home {
  background: linear-gradient(135deg, #f5a623 0%, #c5841d 100%);
  padding: 20px;
  font-size: 1.2rem;
  box-shadow: 0 2px 10px rgba(245, 166, 35, 0.2);
  opacity: 1;
}

/* Sticky state - compact and functional */
#myHeader.state-sticky {
  background: linear-gradient(135deg, #50e3c2 0%, #34a891 100%);
  padding: 10px 20px;
  font-size: 1rem;
  box-shadow: 0 4px 20px rgba(80, 227, 194, 0.4);
  opacity: 1;
}

/* Relative state - transitioning */
#myHeader.state-relative {
  background: linear-gradient(135deg, #4a90e2 0%, #2e67a2 100%);
  padding: 15px 20px;
  font-size: 1.1rem;
  box-shadow: 0 3px 15px rgba(74, 144, 226, 0.3);
  opacity: 0.9; /* Semi-transparent during transitions */
}

🔥 Advanced Event Applications

Once you understand the basics, the possibilities are endless. Here are some advanced patterns that showcase the true power of state-driven design:

📊 Analytics & Tracking

header.addEventListener('natural-sticky', (event) => {
  const state = event.detail.state;
  
  // Track user engagement with header states
  analytics.track('header_state_change', {
    state: state,
    timestamp: Date.now(),
    scrollPosition: window.scrollY,
    userAgent: navigator.userAgent
  });
  
  // A/B test different sticky behaviors
  if (isExperimentGroup('sticky-timing')) {
    // Apply different transition timing for test group
    header.style.transitionDuration = state === 'sticky' ? '0.1s' : '0.3s';
  }
});

🔄 Dynamic Content Loading

header.addEventListener('natural-sticky', (event) => {
  const state = event.detail.state;
  const nav = header.querySelector('.navigation');
  
  switch(state) {
    case 'home':
      // Show full navigation with descriptions
      nav.innerHTML = `
        <a href="/about">About Us<span>Learn our story</span></a>
        <a href="/products">Products<span>Browse catalog</span></a>
        <a href="/contact">Contact<span>Get in touch</span></a>
      `;
      break;
      
    case 'sticky':
      // Show compact navigation with icons
      nav.innerHTML = `
        <a href="/about">📖</a>
        <a href="/products">🛍️</a>
        <a href="/contact">💬</a>
      `;
      break;
      
    case 'relative':
      // Show loading state during transition
      nav.innerHTML = '<div class="loading-dots">•••</div>';
      break;
  }
});

🎪 Coordinated Animations

header.addEventListener('natural-sticky', (event) => {
  const state = event.detail.state;
  
  // Animate other page elements based on header state
  const sidebar = document.querySelector('.sidebar');
  const mainContent = document.querySelector('.main-content');
  
  if (state === 'sticky') {
    // Adjust layout when header becomes compact
    sidebar.style.transform = 'translateX(0)';
    mainContent.style.paddingLeft = '250px';
    
    // Trigger a subtle glow animation
    header.animate([
      { boxShadow: '0 4px 20px rgba(80, 227, 194, 0.4)' },
      { boxShadow: '0 4px 25px rgba(80, 227, 194, 0.6)' },
      { boxShadow: '0 4px 20px rgba(80, 227, 194, 0.4)' }
    ], {
      duration: 300,
      easing: 'ease-in-out'
    });
  } else {
    sidebar.style.transform = 'translateX(-100%)';
    mainContent.style.paddingLeft = '0';
  }
});

🎯 Special Considerations for Bottom Elements

While this demo focuses on top headers, the event system works identically for bottom elements (footers, action bars, etc.). However, there are some important implementation details to be aware of:

⚠️ Critical: Floating Bottom Elements

When using naturalStickyBottom with reserveSpace: false (floating elements), you must ensure proper CSS initialization:

/* REQUIRED for floating bottom elements */
body {
  position: relative; /* Essential for bottom positioning calculations */
}

.floating-bottom-container {
  position: absolute;  /* Required for proper initialization */
  bottom: 0;          /* Required for proper initialization */
  width: 100%;
}

Why this matters: Without proper CSS positioning, the bottom script cannot determine the element's initial location, causing it to render incorrectly until the user scrolls to the very bottom of the page. This requirement doesn't apply to top elements or bottom elements with reserveSpace: true.

📋 Live Event Demo Examples

Want to see more event implementations in action? Check out these minimal demo pages that showcase different event patterns:

⬆️📡 Minimal Header Events → ⬇️📡 Minimal Footer Events →
⬆️🛸📡 Minimal Floating Header Events → ⬇️🛸📡 Minimal Floating Footer Events →
⬆️🎨 Common Pattern: Style on Scroll →

🎨 Common Pattern: Home vs Scrolled Styling

One of the most requested use cases is styling the header differently when it's at the top of the page (home state) versus when it's scrolled away from the top. This creates a clean visual hierarchy where the header looks one way at the "home" position and another way when scrolled.

💡 The Pattern

Instead of styling all three states differently, you can treat sticky and relative states the same, creating a simple "at top" vs "scrolled" distinction:

/* CSS for common home vs scrolled pattern */
.header {
  transition: background-color 0.3s ease;
}

/* Home state - distinctive styling */
.header.state-home {
  background-color: #333;  /* Dark when at top */
}

/* Scrolled states - same styling for both */
.header.state-sticky,
.header.state-relative {
  background-color: #4a90e2;  /* Blue when scrolled */
}

Live Example: The Style on Scroll demo shows exactly this pattern in action - dark header at the top, blue header when scrolled, with a smooth transition between states.

📝 Example: Floating Footer with Events

<!-- HTML -->
<body style="position: relative;">
  <main>Your page content...</main>
  
  <div class="floating-footer-container" id="floatingFooter">
    <footer class="footer-content">
      <span class="footer-text">State: home</span>
    </footer>
  </div>
</body>

<style>
.floating-footer-container {
  position: absolute;  /* Critical for initialization */
  bottom: 0;          /* Critical for initialization */
  width: 100%;
  padding-bottom: 20px;  /* Gap from bottom edge */
}

.footer-content {
  background: #333;
  color: white;
  padding: 15px;
  text-align: center;
  transition: all 0.3s ease;
}

.footer-content.state-sticky {
  background: #50e3c2;
  transform: scale(0.95);
}
</style>

<script>
const footerContainer = document.getElementById('floatingFooter');
const footerText = document.querySelector('.footer-text');

// Initialize floating bottom element
naturalStickyBottom(footerContainer, {
  reserveSpace: false  // Floating mode
});

// Listen for state changes
footerContainer.addEventListener('natural-sticky', (event) => {
  const state = event.detail.state;
  footerText.textContent = `State: ${state}`;
  
  const footer = footerContainer.querySelector('.footer-content');
  footer.classList.remove('state-home', 'state-sticky', 'state-relative');
  footer.classList.add(`state-${state}`);
});
</script>

🔍 Debugging and Development Tips

Working with events makes development much easier because you can see exactly what's happening in real-time. Here are some tips for getting the most out of the system:

🛠️ Development Mode

// Add comprehensive logging for development
header.addEventListener('natural-sticky', (event) => {
  const state = event.detail.state;
  
  console.group(`🔄 Header State Change: ${state}`);
  console.log('Timestamp:', new Date().toLocaleTimeString());
  console.log('Scroll Position:', window.scrollY);
  console.log('Element Bounds:', header.getBoundingClientRect());
  console.log('Viewport Height:', window.innerHeight);
  console.groupEnd();
  
  // Visual debug overlay
  if (window.debugMode) {
    const debugPanel = document.getElementById('debug-panel');
    debugPanel.innerHTML = `
      <div>State: ${state}</div>
      <div>ScrollY: ${window.scrollY}</div>
      <div>Element Top: ${header.getBoundingClientRect().top}</div>
    `;
  }
});

🚀 Performance Optimization

The event system is designed to be lightweight, but when building complex interactions, it's important to follow performance best practices:

✅ Performance Do's

Use specific CSS transitions (background, box-shadow, opacity)
Avoid transition: all as it can break positioning
Debounce expensive operations in event handlers
Cache DOM queries outside of event handlers
Use opacity and color changes for smooth animations
Keep event handlers as lightweight as possible
Use requestAnimationFrame for complex animations

❌ Performance Don'ts

Don't use transition: all with positioned elements
Don't perform heavy calculations in event handlers
Don't trigger layout thrashing with frequent DOM changes
Don't use synchronous AJAX calls in event handlers
Don't scale full-width elements (edge-to-edge headers)
Don't create new DOM elements on every state change
Don't override Natural Sticky's positioning styles

🌟 Real-World Use Cases

To give you inspiration for your own projects, here are some real-world scenarios where the event system shines:

🛒 E-commerce Sites

Shopping cart summary that expands in home state, shows item count when sticky, and displays checkout progress when transitioning

📰 News Sites

Navigation that shows full categories when home, article progress when sticky, and social sharing options when transitioning

💼 SaaS Applications

Toolbar that shows full feature set when home, quick actions when sticky, and context-sensitive help when transitioning

🎓 Educational Platforms

Course navigation that shows module descriptions when home, current lesson when sticky, and progress indicators when transitioning

🎮 Gaming Sites

Player stats that show detailed info when home, current game when sticky, and loading animations when transitioning between matches

🍕 Restaurant Sites

Menu navigation that shows food categories when home, cart summary when sticky, and order status when transitioning

🎨 CSS Architecture for Scalable State Management

As your application grows, you'll want to organize your state-based CSS in a maintainable way. Here's a recommended approach:

📁 Organized CSS Structure

/* Base header styles (state-independent) */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Base shadow */
}

/* State-specific variations */
.header--home {
  /* Styles when at natural position */
  background: var(--header-home-bg);
  padding: var(--header-home-padding);
  box-shadow: var(--header-home-shadow);
}

.header--sticky {
  /* Styles when sticky at top */
  background: var(--header-sticky-bg);
  padding: var(--header-sticky-padding);
  box-shadow: var(--header-sticky-shadow);
}

.header--relative {
  /* Styles when transitioning */
  background: var(--header-relative-bg);
  padding: var(--header-relative-padding);
  box-shadow: var(--header-relative-shadow);
}

/* CSS Custom Properties for easy theming */
:root {
  --header-home-bg: linear-gradient(135deg, #4a90e2 0%, #2e67a2 100%);
  --header-home-padding: 20px 40px;
  --header-home-shadow: 0 2px 10px rgba(74, 144, 226, 0.2);
  
  --header-sticky-bg: linear-gradient(135deg, #50e3c2 0%, #34a891 100%);
  --header-sticky-padding: 10px 40px;
  --header-sticky-shadow: 0 4px 20px rgba(80, 227, 194, 0.4);
  
  --header-relative-bg: linear-gradient(135deg, #f5a623 0%, #c5841d 100%);
  --header-relative-padding: 15px 40px;
  --header-relative-shadow: 0 3px 15px rgba(245, 166, 35, 0.3);
}

/* Dark mode variations */
@media (prefers-color-scheme: dark) {
  :root {
    --header-home-bg: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
    --header-sticky-bg: linear-gradient(135deg, #2b6cb0 0%, #2c5282 100%);
    --header-relative-bg: linear-gradient(135deg, #d69e2e 0%, #b7791f 100%);
  }
}

🔮 Future Possibilities

The event system opens up possibilities that we're only beginning to explore. Here are some advanced concepts you might consider for future projects:

Machine Learning Integration: Use state transition data to predict user behavior and pre-load relevant content
Accessibility Enhancements: Announce state changes to screen readers for improved navigation feedback
Multi-Element Coordination: Synchronize multiple sticky elements to create complex, coordinated interfaces
Performance Analytics: Track which states correlate with higher user engagement or conversion rates
Dynamic A/B Testing: Test different behaviors by modifying state transition logic in real-time
Progressive Web App Integration: Use state changes to trigger service worker updates or cache optimizations

The event system transforms Natural Sticky from a simple animation library into a foundation for building sophisticated, state-aware user interfaces. Whether you're creating simple visual feedback or complex application logic, events give you the tools to build exactly what your users need.

🚀 Ready to Build Something Amazing?

The event system puts unprecedented power in your hands. Start with simple state-based styling, then gradually build more complex interactions as your application grows. The only limit is your imagination!