停止在 Big Cartel 网站上滚动标题图片

Question

我目前正在定制我的 Big Cartel 网站，我遇到了使用 Parade 主题时标题图像随页面滚动的问题。

这对于我的主商店页面来说没问题，但对于我的 Lookbook 页面来说，它过多地覆盖了我的内容，我希望它要么被隐藏要么停止滚动。

有没有人可以解决这个问题？

非常感谢！

.header {
  background-color: transparent;
  padding: 50px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 97;
}
@media screen and (max-width: 767px) {
  .header {
    padding: 20px;
  }
}
.header.overlay-header {
  position: relative;
}
.header .primary-header {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-bottom: 15px;
}
.header .secondary-header {
  margin: 0 auto;
  text-align: center;
}
.header .header-center {
  text-align: center;
}

Answer 1

您的标题是fixed，因此它将相对于视口处于固定位置。只需将其设为relative 或将位置全部删除以使其成为static。

.header {
  background-color: transparent;
  padding: 50px;
  position: relative;
  top: 0;
  width: 100%;
  z-index: 97;
}

了解position 属性对您的未来非常有帮助，所以这里有一个小概述。

您需要知道5个不同的位置值；

静态（默认）

带有position: static; 的元素没有定位在任何特殊位置 方式;它始终根据页面的正常流程进行定位。这是position 的定义，如果您没有在 CSS 中明确设置。

亲戚

带有position: relative; 的元素相对于其定位 它在层次结构中的正常位置。

设置顶部、右侧、底部和左侧属性 相对定位的元素会导致它被调整远离 它的正常位置。其他内容不会调整以适应 元素留下的任何间隙。

已修复

带有position: fixed; 的元素相对于 视口，这意味着它始终保持在同一个位置，即使 页面滚动。使用了 top、right、bottom 和 left 属性 定位元素。如果您将导航栏设置为顶部的fixed，它将始终位于视图的顶部。如果您在底部将页脚设置为fixed，它将始终位于视图的底部并在滚动时保持在那里。

绝对

带有position: absolute; 的元素相对于 最近定位的祖先（而不是相对于 视口，就像固定的一样）。

但是；如果绝对定位元素没有定位 祖先，它使用文档正文，并随着页面移动 滚动。

我个人建议对absolute 谨慎一点 定位，实际上仅将其用于叠加和分层 定位到absolute 的元素将忽略文档的流程。