Below is the code snippet and if run it, you can see the header element does not stick. I have looked at the at following questions. “Position: sticky;” not Working CSS and HTML and CSS: 'position: sticky' not working when 'height' is defined among many others but it did not help..
Here is my code.
<body style="margin: 0">
<div id="header" style="height: 50px;width: 100%;position: sticky;top: 0px;background-color: rgb(33, 150, 243);">
<div>header contents</div>
<div>header contents</div>
</div>
<div id="container" style="position: absolute; top: 50px; left: 0px; width: 100%; background: #ddd;">
<div style="height: 1000px;">
<div>some contents</div>
<br>
<div>some contents</div>
<br>
<div>some contents</div>
<br>
<div>some contents</div>
<br>
<div>some contents</div>
<br>
</div>
</div>
</body>
