Question

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

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

然而，这有点复杂，所以我正在寻找网站范围的修复。我遇到了一种在JQuery中实现的方式，如下所示：

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

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

那么，到底有没有呢？标题已固定在任何页面上，因此我试图找出一个网站范围的解决方案......

此外，所需的保证金金额随着不同设备的页面缩小而变化，目前通过媒体查询修复。

所以我想我需要能够不断测量.site-header的东西并将这个数量的边距应用到.site-inner ......

如果这不是解决问题的正确方法，我可以接受任何其他想法。

Answer 1

使用以下函数获取客户端高度或关闭设置标题部分的高度

      $scope.myfunc =function(balance){
          //Removes events from the calendar.
          uiCalendarConfig.calendars.calendar.fullCalendar('removeEvents'); 
          $scope.showLeaveBalance(balance)      
      }

此处有更多信息：Get div height with plain JavaScript

Answer 2

你能不能只将头部的高度应用为.site-inner类的上边距？这将修复您网站上的所有网页。

.site-inner {
    margin-top: 149px;
}

和移动屏幕尺寸标题：

@media (max-width: 859px) {
    margin-top: 93px;
}

Answer 3

你需要使用outerHeight（）而不是height（）。

以下是您需要申请的更新代码：

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

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

如果您需要更多帮助，请与我联系。

谢谢！

使用javascript清除固定标头

3 个答案: