Question

我的网站顶部有一个固定的标头，但标头是错误的，因此内容的开头不会显示在其后。我使用JS为假标题提供与真实标题相同的高度，但是对于禁用JS的任何人，其内容的顶部都会被剪掉。

是否有更好的方法不使用JS？我唯一能想到的就是在我的虚假标题中包含与真实标题完全相同的内容，但是我认为这可能会减慢网站速度，因为我的真实标题中发生了很多事情。

var head_height = $("#real_header").outerHeight(true);
$("#false_header").css("min-height", head_height+'px');

#real_header{
  position:fixed;
  background-color:#c44;
}

#false_header{
   background-color:#4c4;
}

#content{
  background-color:#44c;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="real_header">Header</div>
<div id="false_header"></div>
<div id="content">Content</div>

Answer 1

抛弃伪造的标题，然后在body元素上设置上边距。您是否要让JS更改该保证金取决于您。

var head_height = $("#real_header").outerHeight(true);
$("#false_header").css("min-height", head_height + 'px');

body {
  margin-top: 18px;
}

#real_header {
  position: fixed;
  background-color: #c44;
  top: 0;
}

#content {
  background-color: #44c;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="real_header">Header</div>
<div id="content">Content</div>

Answer 2

您可以为内容或整个正文从上至下设置边距。

var head_height = $("#real_header").outerHeight(true);
$("#content").css("margin-top", head_heigh + "px");

将内容下移到固定位置标题后面

2 个答案: