具有固定位置的元素在移动设备滚动时隐藏一半

Question

我想在向下滚动时固定元素的位置 (.topsection)。桌面工作正常，但在移动设备上它隐藏了一半。

Screenshot

注意：具有class .topsection-container 的元素需要作为在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 在您的代码中运行良好，唯一的问题是 body 在移动屏幕中向下滚动，这就是 .topsection-container 一半向上滚动的原因。 body 有额外的滚动内容让它们滚动。

添加以下内容 CSS 并尝试：

html, body {
    overflow: auto:
}

具有固定位置的元素在移动设备滚动时隐藏一半

Element with fixed position hides by half on scroll from mobile

html

css

position

css-position

fixed