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>

我的问题是如何获得课程=＆＃34;内容＆＃34;加载到class =＆＃34; header＆＃34;而不是在。背景渐变颜色应该像这样匹配右上角的标题颜色 screen shot, matched

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

因为需要使用填充来保持顶部图像不在.header后面。我认为这就是学校让我这样做的原因。

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

感谢您的帮助！

Answer 1

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

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

ps：减少header

的padding-top

.content

内容加载在粘贴标题后面，而不是在

1 个答案: