Add sticky day header that follows scroll position

[mendoc]

Summary

This PR adds a sticky day header that appears at the top of the page and displays the current day as the user scrolls through the content. The header smoothly fades in and out based on scroll position.

Key Changes

• CSS Styling: Added styles for #sticky-day-header element with:

  • Fixed positioning at the top of the viewport
  • Frosted glass effect using backdrop-filter blur
  • Smooth opacity transition for fade in/out effect
  • Professional styling with border, shadow, and typography

• HTML Structure: Added a new <div id="sticky-day-header"> container with an inner <span> element to display the day label

• JavaScript Functionality: Implemented updateStickyDayHeader() function that:

  • Tracks scroll position and identifies which day group is currently visible
  • Updates the sticky header text to match the active day
  • Shows/hides the header with a fade transition based on whether a day is in view
  • Hooks into the existing scroll event listener for performance

Implementation Details

• The sticky header uses pointer-events: none to avoid interfering with page interactions
• Day detection uses a 10px offset threshold to trigger the header visibility slightly before the day separator reaches the top
• The header uses modern CSS features (backdrop-filter) with webkit fallback for broader browser support
• Opacity-based visibility provides a smooth UX without layout shifts

https://claude.ai/code/session_012xh9iGf2pSFsWi5kUURDCw