Position: sticky has strange behavior in Google Chrome

HTML & CSS
,
1

tI’m developing a responsive website with a side navigation. On side navigation, I tried to keep up the header when user is scrolling down. I used on header-bar, position stiky.

.header-bar {
    position: sticky;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    top: 0px;
    padding-top: 2px;
    width: 100%;
    color: #005654;
    z-index: 3;
    background-color: white;
}

Sometimes, it’s working, sometimes, no. The header bar buttons become unusable, because header-bar content seems to be, automatically, moved down, when scrolling, even though, header-bar remains displayed on top. Please, see attached img: https://i.stack.imgur.com/cTUUA.jpg

2

When you use vendor prefixes in your css, the property without any prefix should always be last in the list.
Also, the only prefix you should be using for sticky is webkit.
You should also have a fall-back position for the browsers that don’t yet support sticky, possibly fixed.

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.