当顶部粘滞时，保持固定div的流量低于彼此的最佳做法

Question

这是一个更理论化的问题，因为我正在寻找以下方案的最佳方法。

Div通过CSS自然地一个接一个地（垂直地）对齐，因此在左图像上构建结构没有问题。顶部div包含一些文本和图像，而第二个只包含选项卡。当页面滚动时，带有信息的顶部div变粘（右图）。我没有隐藏所有信息，这意味着不会隐藏所有的孩子。

我将两个div设置为固定位置并给它们相同的z-index。这在滚动时将它们放在页面顶部。为了减少顶部div的内容，我将display：none设置为滚动页面时我不想看到的元素。可见性和不透明度都不会消除“释放”元素占用的空间。为了保持第二个div（带有标签）在粘性标题下方对齐，我使用jQuery并动态设置其顶级属性，具体取决于页面是否滚动。

当我尝试设置从正常到粘性的过渡动画时会出现问题。我的问题是我应该使用什么方法为粘性动画设置动画并自然地使下面的div流动，并在滚动条处于活动状态时将其放在粘性动画下面。两者可以在没有jQuery的情况下对齐吗？当我不知道它的实际高度时，如何设置顶部高度的变化？

修改

我设法在JSFiddle中构建了类似的行为。您可以看到标签的动画有多不合适以及动画如何不适用于上面的标题部分。 fiddle

jQuery代码：

$(document).ready(function () {
  $(".tabs").css("top", function() {
    return $(".header").outerHeight(true);
  });

  $(window).scroll(function() {
    if($(window).scrollTop() > 0) {
      $(".description").css("display", "none");
      $(".about").css("display", "none");
    }
    else {
      $(".description").css("display", "block");
      $(".about").css("display", "block");
    }

    $(".tabs").css("top", Math.max($(".header").outerHeight(true), 0 - $(this).scrollTop()));
  });
});

CSS：

.header {
   background-color: grey;
   color: white;
   position: fixed;
   transition: height 0.2s linear;
   -moz-transition: height 0.2s linear; /* FF 4 */
   -webkit-transition: height 0.2s linear; /* Safari & Chrome */
   -o-transition: height 0.2s linear; /* Opera */
 }

 .centered {
    text-align: center;
 }

 .tabs {
    position: fixed;
    width: 100%;
    transition: top 0.2s linear;
    -moz-transition: top 0.2s linear; /* FF 4 */
    -webkit-transition: top 0.2s linear; /* Safari & Chrome */
    -o-transition: top 0.2s linear; /* Opera */
 }

 #tabList li {
     display: inline-block;
 }