Sticky Nav Reveals Content Behind It While Scrolling Slowly
I Made a Fiddle That Demonstrates This Behavior: My Desired Outcome Is a Nav Bar at the Top of the Page That Sticks There Even While Scrolling. I Assumed That...
I made a fiddle that demonstrates this behavior:
My desired outcome is a nav bar at the top of the page that sticks there even while scrolling. I assumed that using position: sticky; top: 0; would achieve this. It mostly does, but there is a terrible-looking visual effect here when you scroll down slowly. Even though I am using a CSS reset in my project to make sure default margins are set to 0, I can still see a sliver of other content above the navbar, even despite the top: 0!
Am I implementing this wrong, or is there possibly a better way that doesn't come with this side-effect?
1 Answer
maybe you can try position: fixed and z-index:2
Sarah Jenkins is a veteran tech journalist with over 12 years of experience covering artificial intelligence, mobile innovations, and digital ethics. Her insights have appeared in leading technology publications worldwide.
