Sticky Secondary Navigation on Single Pages

Parent Epic: Single Post Navigation Enhancements

On single Tour, Destination, and Accommodation pages, we need a sticky anchor navigation menu that:

• Stays visible as the user scrolls down the page.
• Allows jumping between sections like Overview, Itinerary, Reviews, Gallery, etc.
• Highlights the currently visible section in the viewport.

This feature will improve usability on long pages by making it easy for users to navigate directly to the content they want.

Scope

• Implement sticky position styling for anchor nav.
• Dynamically highlight the current section based on scroll position.
• Ensure links smoothly scroll to target sections.
• Ensure sticky nav does not overlap important header UI elements.
• Support all single post types: Tours, Destinations, Accommodation.
• Style according to LSX Design System.

Acceptance Criteria

• Sticky nav remains fixed and visible while scrolling.
• Active section highlight updates correctly as user scrolls.
• Smooth scrolling works on all major browsers.
• Fully accessible via keyboard and screen readers.
• No layout shifts or overlapping content.

References

• Original meeting notes: Issue #373
• Figma prototype: https://www.figma.com/community/file/1397897183253228355/lsx-tour-operator-design-system