My header has a position: fixed; property and it works fine on desktop.
However, when scrolling on mobile, there is a delay in the header adjusting to my scroll position. It remains unfixed until I stop scrolling, then suddenly snaps into place.
Is there any workaround or solution for this issue?
<div class="mobile-header">
<a href="#" class="mobile-header-button">Open/close</a>
<a href="/" class="mobile-header-home">Home</a>
<ul class="mobile-header-searchbutton">
<li class="search-button"><a href="/search">Search</a></li>
</ul>
</div>
Above is the HTML code, and below is my CSS styling:
.mobile-header {
display: block;
background: #fff;
height: 62px;
width: 100%;
float: left;
position: fixed;
top: 0;
right: 0;
-webkit-transition: left .2s;
-o-transition: left .2s;
transition: left .2s;
z-index: 9999;
}
Despite setting the position as fixed, the header lags behind when scrolling on mobile while maintaining its fixed position on desktop.