javascript - 使用javascript清除固定 header

Question

我在这里有一个网站:http://staging.seedcreativeacademy.co.uk/blog/我在哪里修复了标题。

目前，在其他页面上，我手动添加了上边距以清除固定标题(因此内容不会落在标题后面)。

然而，这变得有点复杂，所以我正在寻找一个站点范围的修复程序。我遇到了一种在 JQuery 中执行 out 的方法，就像这样:

jQuery(document).ready(function() {
    header_height = $(".site-header").height();
    $(".site-inner").css("margin-top", header_height);
});

但是，这是行不通的。我认为它不起作用，因为固定的 .site-header 实际上没有指定的高度。我认为高度基于内容和内容的填充/边距。

那么，有什么办法吗？页眉固定在每个页面上，所以我试图找出一个站点范围的解决方案......

此外，随着不同设备的页面缩小，所需的边距量也会发生变化，目前已通过媒体查询修复。

所以我想我需要一些可以不断测量 .site-header 并将该数量的边距应用到 .site-inner ...

如果这不是处理此问题的正确方法，我愿意接受任何其他想法。

Answer 1

您需要使用 outerHeight() 而不是 height()。

这是您需要应用的更新代码:

 jQuery(document).ready(function(){
    header_height = jQuery(".site-header").outerHeight();
    jQuery(".site-inner").css("margin-top", header_height);
 });

我已经通过从您网站的控制台执行上述代码进行了检查，它工作正常。

如果您需要更多帮助，请告诉我。

谢谢!