Can't use on header element

[RongBranovate]

I used the sticky attribute on a <header> element but it won't stick. If i use it on the inner <div> element it will stick but without the wrapping header, that way I lose the header element style, so everything looks different. any idea why this is happening and how can it be solved?

[chris480]

Just ran into the same issue. It appears because sticky makes calculations on an element's offset from the top of the page.

I shrunk my header and moved it down further to force an offset.

[RongBranovate]

I see... Would you mind adding an example?

Thanks!

[chris480]

header {
 margin-top:1px
}

I also tried .1px and it still works.

[RongBranovate]

@chris480 Adding this causes the header to push the entire body downwards at the start of the scroll - leaving a white blank space when i scroll.... maybe is it because my header is transparent?

[RongBranovate]

Ok, so i gave it a different background-color when it sticks and now its not white