有两种方法可以解决这个问题：

CSS方式

只需隐藏标题的副本，并将其插入到内容之前，并在其上使用position: static和visibility: hidden。

JS方式

动态获取页眉外部高度并将其用于顶部边距，如下所示：

var topPadding = elem.outerHeight();
$body = $('body');
$body = $body.css('padding-top', topPadding + 'px');

这里有一个正在工作的jsFiddle

var heightfixed = $(".navbar-header").outerHeight();
$(".content").css("margin-top", heightfixed);

如果你的标题在媒体查询或其他功能中发生了变化，你可以简单地添加$(window).resize(function() { [your code here] });来适应窗口大小调整功能中的边距。

如果你的header是固定的，动态改变header的高度，那么你需要计算header的高度，并设置为内容div。
DEMO
jQuery

var headerHeight = $(".navbar-header").height();

$(".content").css("margin-top" , headerHeight);

无边距/填充的CSS解决方案

使用position: sticky和top: 0px作为固定的头部。这样，div将是固定的，并且还从父级获取其高度，因此它不会与其兄弟一起折叠。

.parent {
  height: 50vh;
  overflow: auto;
  background: yellow;
}

.fixed {
  position: sticky;
  top: 0px;
  background: pink;
}

.content {
  height: 150vh;
}

<div class="parent">
     <div class="fixed">
        Fixed Header
     </div>
     <div class="content">
        <p>content</p>
     </div>
</div>