Navbar visibility flickers on small scroll movements and appears on empty hover area

Increasing Access

Description:
The navbar visibility behavior appears inconsistent and unstable during scroll and hover interactions.

The navbar:

• Appears and disappears on very small scroll movements.
• Becomes visible when hovering over the empty navbar area, even if it was previously hidden.
• Flickers when alternating between small upward and downward scroll movements.
• This results in an unintended and distracting UI behavior.

Steps to Reproduce:

1. Open the website.
2. Scroll down slightly.
3. Scroll up slowly using small increments.
4. Observe the navbar appearing.
5. Continue small scroll movements.
6. Notice that the navbar hides again.
7. Hover the mouse over the empty top navbar region.
8. The navbar appears again.

Expected Behavior:

• Navbar visibility should be stable.
• It should not toggle on minimal scroll changes.
• Hovering over an empty area should not trigger visibility unless explicitly designed.
• Scroll-based visibility should use a clear threshold and consistent logic.

Actual Behavior:

• Navbar toggles repeatedly with small scroll movements.
• Hovering in the navbar area forces it to appear even if scroll logic hides it.
• Behavior feels inconsistent and flickers visually.

Possible Cause:

• Scroll direction logic lacks a minimum delta threshold.
• Hover-based CSS is overriding scroll-based visibility state.
• Missing scroll debouncing or throttling.
• State toggling is happening too frequently.

Most appropriate sub-area of p5.js?

Home

Feature request details

Suggested Improvement:

• Introduce a minimum scroll threshold before toggling navbar visibility.
• Add debounce/throttle to scroll event handler.
• Ensure hover and scroll logic do not conflict.
• Make visibility logic deterministic and consistent.

Start by reproducing the navbar behavior on the website with small scroll movements and hover over the empty top region. Locate the navbar's scroll and hover visibility logic, then verify that minimal movements do not toggle it and that hover does not override the intended hidden state.