I made a fiddle that demonstrates this behavior: https://jsfiddle.net/fatmh6oc/

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?

CodePudding user response：

maybe you can try position: fixed and z-index:2