解决flex动态高度问题

上面有一个容器，下面是主体，现在有这么个需求，上面这个容器在滚动的时候，固定在浏览器顶端

所以呢他给它加了一个 position: fixed 然后呢 top：0，这样就固定住了

但是在滚动在最上面的时候呢，他会盖住第一句话，我们给他加一个透明度就能看出来

所以他为了不被遮盖住，他不得不在这个body上加一个paddding-top，比如说60，但是这种情况就把高度写死了，因为上面这个容器的内容是动态的，也就说他高度也是动态的，不一定是60

第一个想法其实就是简单一点，用 JS 来解决一下，比如说我们这不写死了，等浏览器加载完以后，我们用javascript代码来，动态设置这个 padding-top

document.body.style.paddingTop = document.querySelector('.top-bar').clientHeight + "px";

这样滚动条往下滚动是没问题的，这是第一种思路