[BUG] - Navbar shouldHideOnScroll causes Navbar to vanish or get stuck

[andyryan33]

NextUI Version

2.4.0

Describe the bug

After updating to 2.4.0, I am seeing the Navbar component with shouldHideOnScroll set to true resulting in the Navbar disappearing after a few scrolls going up & down. Or, if it doesn't disappear, it reverts to sticky behavior. This happens even on the NextUI component documentation page under the 'Hide on scroll' section. A page refresh brings it back.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1- Go to https://nextui.org/docs/components/navbar#hide-on-scroll
2- Start scrolling up and down a few times
3- Navbar disappears or goes to sticky
4- Tested on Chrome, Edge, and both mobile/desktop.

Expected behavior

As a user, the Navbar should hide on scroll, but reappear right when I scroll back up, and should always be at the very top if I have not scrolled or if I returned the scroll all the way to the top.

Screenshots or Videos

Navbar_scroll_issue.mp4

Operating System Version

Windows 11, Android 14

Browser

Chrome

[linear]

ENG-930 [BUG] - Navbar shouldHideOnScroll causes Navbar to vanish or get stuck

[wingkwong]

preliminary findings:

• works fine in Mac with different browsers
• seems Windows problem

[And3rsonTorres]

• doesn't work on my mac (Monterey 12.7.5) or my iPhone safari.
• work fine in mac and Pixel 7a Chrome but get stuck open after 4 minutes of scrolling.

Screen.Recording.2024-05-31.at.9.20.25.AM.mp4

i remove node module from my app and use npm i and show this

npm WARN deprecated npmlog@5.0.1: This package is no longer supported.
npm WARN deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated are-we-there-yet@2.0.0: This package is no longer supported.
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm WARN deprecated gauge@3.0.2: This package is no longer supported.

i remove them and the hide on scroll work but i get when i click any Link in the Navbar
TypeError: undefined is not an object (evaluating 'path.startsWith')

[PaisWillie]

+1

[Aaron-Darklake]

+1

[brotodex]

+1

[haobarry]

same problem

[kevinmatr]

+1 ,doesn't work on my mac on Chrome

[stixandstacks]

I'm encountering this issue in a Next14 app. Works normally on my Windows PC in various browsers, but fails consistently on my iPhone on Chrome and Safari. Safari on Macbook breaks also.

Details

• "@nextui-org/react": "^2.4.2"
• "next": "^14.2.4"
• "tailwindcss": "^3.3.0"

[ajayda24]

same problem

[janosgy]

I tried different versions, and they all have this issue
2.4.1
2.3.6
2.3.0

[DanielNoonan]

Next 14, @latest NextUI, Chrome on Mac - same problem. Can also confirm that the problem exists in the NextUI docs example. Scrolling around in the NextUI docs example for about 30 - 60 seconds and the navbar either disappears or becomes permanently sticky. A page refresh resets it.

[pratyush3124]

I have fixed this issue on ##3315 please review.

[yelwin-d3]

+1 ,doesn't work on my mac on Chrome

[yelwin-d3]

@wingkwong Is the issue closed now that it's fixed? Can you tell me in which version this issue was fixed?

[wingkwong]

@yelwin-d3 This issue is still open and there's a PR under review. The fix should be available in the next bug fix release. I closed your issue because you just reported the same thing as this one. That's why I marked yours as duplicated. We just need one issue to keep track of the progress.

[TucciAlessandro]

Hi there guys, when will we have this fixed through next-cli? Thank you

[wingkwong]

Closing - fixed in above PR. The fix will be available in next bug fix release v.2.4.3.

@TucciAlessandro once we release, you will have the fix through nextui-cli.