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

问题描述

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

Screenshot

My website

注意：类为 .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;
}

解决方法

position: fixed 在您的代码中运行良好，唯一的问题是 body 在移动屏幕中向下滚动，这就是为什么 .topsection-container 的一半向上滚动。 body 有额外的滚动内容让我们滚动。

添加以下 CSS 并尝试：

html,body {
    overflow: auto:
}