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

【问题标题】：Element with fixed position hides by half on scroll from mobile固定位置的元素在移动设备滚动时隐藏一半
【发布时间】：2020-12-28 13:57:06
【问题描述】：

我想在向下滚动时固定元素的位置 (.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;
}

【问题讨论】：

手机屏幕似乎在您提到的网站上运行良好。添加一些屏幕截图以明确您想要的内容
@cursorrux 我已经编辑了帖子并附上了截图。所以当向下滚动时，固定元素被隐藏了一半。当滚动到顶部时，它会正确显示。

标签： html css position css-position fixed

【解决方案1】：

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

添加以下 CSS 并尝试：

html, body {
    overflow: auto:
}

【讨论】：

更改：到；在“自动”之后以节省某人的时间；）感谢您的回答！