Element with fixed position hides by half on scroll from mobile

Question

I want to fix an element's position (.topsection) while scrolling down. Desktop works fine, but from mobile it hides by half.

Screenshot

My website

Note: An element with class .topsection-container needs as wrapper for changing background-color on scroll event in js.

HTML

<div class="topblock">
  <div class="header">
    <div class="topsection-container">
      <div class="topsection">
        `//some code...`
      </div>
    </div>
  </div>
</div>

CSS

.topsection-container {
  position: fixed;
  width: 100vw;
  left: 0;
  z-index: 3;
  transition: all .3s ease 0s;
}

.topsection {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 10% 0 10%;
  position: relative;
}

Answer 1

position: fixed works well in your code, the only issue is body scroll down in mobile screen that's why, half of .topsection-container scrolled up. body having extra scroll things which let's them scroll.

Add following CSS and try:

html, body {
    overflow: auto;
}