内容加载在粘性标题后面而不是在下面

Question

这是页面的链接 jsbmac.com 这是钢笔 codepen，但图片无法加载，请查看实时版本。这是相关的CSS

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 282px;
}

.content {
    padding: 26px;
    padding-top: 282px;
}

这里是 JavaScript

<script>
window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}
</script>

我的问题是如何让 class="content" 加载到 class="header" 下面而不是下面。背景渐变颜色应该与右上角的标题颜色匹配，如下所示 screen shot, matched

但它看起来像这样 screen shot, not matched

因为需要填充以防止顶部的图像位于 .header 后面。我认为这就是 w3schools 让我这样做的方式。

如果我删除 z-index，我仍然需要为 .sticky+.content 和 .content 创建额外的填充，以便顶部的图像不会丢失，并且播放器控件在滚动时最终位于标题的顶部，所以不是这样。我认为必须有某种方法可以将 .content 的顶部固定到 .header 的底部，但我不知道如何。

感谢您的帮助！

Answer 1

当然它会在标题下，因为它是400px 高并且在顶部有一个固定位置，将margin-top 添加到您的.content 将解决问题

由于标题有position:fixed，它和.content都相对于窗口定位，因此.content的margin-top必须与header的高度相同它。

ps : 减少.content的padding-top

.sticky + .content {
    padding-top: 60px;
    margin-top: 375px;
}