Skip to content

ENH: Add sticky lecture series title to navbar on scroll #332

@mmcky

Description

@mmcky

Feature Request

Add a dynamic lecture series title to the top navbar that appears when the user scrolls past the page header, maintaining context for readers navigating long pages.

Behavior

  • Trigger: When the lecture series heading in the page header scrolls out of view
  • Display: Show the series title in the center of the top navbar
  • Animation: Fade in/out transition for smooth appearance
  • Responsive: Only active on desktop/tablet screens (disable on mobile due to space constraints)

Implementation Details

Technical Approach

  1. JavaScript: Use Intersection Observer API to detect when page header is visible/hidden
  2. Dynamic Content: Inject/show series title in navbar based on scroll position
  3. CSS: Add fade transitions and center positioning for navbar title
  4. Responsive: Use media queries to disable on mobile screens

Navbar Integration

  • Placement: Center of navbar
  • Styling: Match existing navbar style and typography
  • Space Management: Ensure it doesn't conflict with logo, search, or action buttons

Files to Modify

  • src/quantecon_book_theme/assets/scripts/index.js - Add scroll detection logic
  • src/quantecon_book_theme/theme/quantecon_book_theme/layout.html - Add navbar title container
  • src/quantecon_book_theme/assets/styles/index.scss - Add styling for dynamic title

Benefits

  • Improved navigation context for long-form content
  • Better user experience when scrolling through lectures
  • Maintains visual connection to lecture series while reading

Related

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions