[FEATURE][FRONTEND] Scroll-based active navbar highlighting and improved FAQ answer spacing #297
Description
Summary
Enhance the frontend user experience by refining page scroll behavior and visual feedback across key UI components. Implement a scroll-aware navbar that dynamically updates and underlines the active navigation item based on the section currently visible in the viewport, helping users clearly understand their position while scrolling through the page.
In parallel, improve the FAQ section readability by adding consistent and adequate spacing around FAQ answers, ensuring content does not feel crowded and remains easy to scan during scrolling.
Overall, these improvements aim to deliver a smoother scrolling experience, clearer navigation cues, and a cleaner, more structured layout, resulting in better usability and a more polished interface.
Problem
As users scroll through the page, there is currently no visual feedback indicating which section is active, making it difficult for them to understand where they are within the page. The lack of scroll-based navigation feedback in the navbar reduces orientation and weakens the overall browsing experience.
Additionally, the FAQ section appears in the middle of the page, while its corresponding navbar item is positioned at the end of the navigation menu. This inconsistency between content placement and navigation order can confuse users and disrupt their expected flow when scrolling or navigating via the navbar.
Furthermore, the FAQ answer layout lacks adequate spacing, causing the content to feel dense and hard to read. Poor spacing negatively impacts content clarity, especially during continuous scrolling.
Together, these issues create navigation ambiguity, layout inconsistency, and reduced content readability, ultimately leading to a less intuitive and less user-friendly interface.
Screen.Recording.2025-12-20.131527.mp4
Proposed Solution
Proposed Solution
Enhance the navigation experience by introducing a scroll-aware underline indicator for navbar items. As users scroll through the page, the navbar will dynamically highlight (underline) the section currently visible in the viewport, providing immediate visual feedback and improving orientation across the page.
Align the FAQ navigation placement with the actual page structure to ensure consistency between the navbar order and content flow. Since the FAQ section is positioned in the middle of the page, its corresponding navbar item should reflect this placement to reduce user confusion and create a more intuitive navigation experience.
Further improve the FAQ section layout by applying consistent spacing and padding to FAQ answers. This adjustment will enhance content readability, reduce visual clutter, and make it easier for users to scan and read answers while scrolling.
Collectively, these updates will create a smoother and more intuitive scrolling experience, strengthen navigation clarity, and deliver a more polished and user-friendly frontend interface.
Edge Cases
Ensure the correct navbar item is highlighted when the page loads at a non-top scroll position (e.g., page refresh or deep linking).
Handle fast scrolling scenarios where multiple sections may pass quickly without incorrect navbar highlighting.
Ensure proper behavior when two sections are partially visible at the same time.
Maintain correct active state when users navigate via navbar clicks instead of scrolling.
Ensure underline highlighting works consistently across different screen sizes and responsive layouts.
Prevent layout shifts or flickering in the navbar underline during scroll events.
Verify FAQ spacing remains visually consistent across varying content lengths and dynamic FAQ data.
Screen.Recording.2025-12-20.132101.mp4
Alternatives Considered
No response
Additional Context
Users currently have no clear indication of which section they are viewing while scrolling, and the FAQ section’s placement in the middle of the page can be confusing since its navbar item appears at the end. FAQ answers also lack proper spacing, making them harder to read.
Adding scroll-based navbar highlighting and improving FAQ spacing will enhance navigation clarity, readability, and overall user experience