I’m experiencing an issue with the CSS sticky property on a header element. When the header transitions from its initial fixed position to sticky, it starts to jitter or shake as I scroll to a specific position. This makes the user experience quite unpleasant.

Initially, the header was set to position: fixed; and everything worked smoothly.
I changed the header’s position to sticky using position: -webkit-sticky; position: sticky; to improve the layout.
The problem occurs when the header becomes sticky at a certain scroll position.
I expected the header to remain smooth and stable during the transition from fixed to sticky. However, instead, it jitters or shakes noticeably.