Sticky bar is often active with no scroll
See original GitHub issueI have noticed the umb-sticky-bar
often has the umb-sticky-bar--active
class although there is no scroll on page or when scroll position is at top.
Reproduction
If you’re filing a bug, please describe how to reproduce it. Include as much relevant information as possible, such as:
Bug summary
Specifics
* Umbraco 8.2.0 (latest changes on github `v8/dev` branch.
* Google Chrome Version 76.0.3809.132
* Firefox Version 69.0
* Microsoft Edge Version 42.17134.1.0
* Tested on a laptop with a browser viewport size on 1536 × 754px
Steps to reproduce
- Go to page like recycle bin in content/media section and see the sticky bar is active (shadow) at top. Sometimes when clicking the recycle bin node again or refreshing page the shadow is gone.
- Go to a page with listview and see the sticky bar is active (shadow), altough no scroll on page.
Expected result
The sticky bar should only have the class umb-sticky-bar--active
(with shadow) when there is scroll on page and the umb-sticky-bar
is sticky at top of the page.
Actual result
The umb-sticky-bar
has sometimes umb-sticky-bar--active
(with shadow) when there is scroll on page and with a grid on a document type it seem to be the reverted, so it has shadow when it is not at top of the page and then no shadow when it is at top of the page (sticky).
Issue Analytics
- State:
- Created 4 years ago
- Comments:5 (5 by maintainers)
Top Results From Across the Web
After a little scroll, the sticky navbar just is not fixed anymore
1 Answer 1 ... According to w3schools, sticky is defined as: The element is positioned based on the user's scroll position A sticky...
Read more >.elementor-sticky--active is applied regardless of scroll ...
When setting a section to sticky (top), it is always active. The page loads and while it is loading I see css styles...
Read more >Sticky, Smooth, Active Nav
Uses sticky positioning. It stays on the screen when it can, but won't overlap the header, footer, or ever make any of it's...
Read more >The 3 Golden Rules of Sticky Menu Navigation
Sticky menu elements increase visitors' confidence as they scroll up and down a page, giving them a sense of control while interacting with...
Read more >How to prevent overflow scrolling in CSS
The scroll value of the overflow property adds horizontal and vertical scroll bars so you can adjust or scroll the content if it's...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Ah! sticky bar! My favourite enemy!
I’ll close this as a duplicate for the issues mentioned in the PR 😃