search

Tytan888 / CSSWENG-S11-G1

0 stars 0 forks source link

Frontend Bug on 'about#' page Sidebar #13

Closed rpineda26 closed 11 months ago

rpineda26 commented 11 months ago

💾 Description: The sidebar on the About page contains the outline of the contents of the page. A green highlight on the outline scrolls as the user scrolls up and down the page. However, in the current state, the highlight does not scroll up even as the user scrolls up the page. The outline "Our Team" also seems to be stuck being highlighted when the user scrolls past it even when the screen no longer shows that part.

image

⏰ Expected Outcome: The green highlight in the sidebar must scroll as the user scrolls up and down the page. When the user scrolls to another part of the page and the previously highlighted element is no longer shown on the screen, the sidebar must unhighlight the outline.

☎️ Actual Outcome: The green highlight in the sidebar scrolls down but never scrolls up even when the user scrolls up and down. The "Our Team" outline is never unhighlighted even when it is no longer shown on the screen.

🎶 Steps to Reproduce:

  1. Go to the About page.
  2. Check the sidebar as you scroll down the page.
  3. Check the sidebar as you scroll up the page.
Tytan888 commented 11 months ago

🛠️ Fix: This bug was caused by forgetting to have a height set and to enable "overflow-y: scroll" on the scrollable element as indicated by the Bootstrap 5 Scrollspy documentation... image This was fixed by the following line of css... image

New Output/Behavior: image Now, the green highlight follows the scroll progress of the user on the page as intended.