Javascript 粘性收割台在其高度响应时断裂

我正在尝试实现一个像这样的粘性标题，但响应速度很快

我已经让它大部分工作，除了一个部分：当页面向后滚动时，页眉下方的页面内容突然上升

我正在使用JavaScript和jQuery

我已经用评论标记了我怀疑问题的地方：

<script>
window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var top_cont = document.getElementById("top-container");

function myFunction() {
    var sticky = top_cont.offsetHeight;
    var pad_amt = header.offsetHeight+"px";

    if (window.pageYOffset > sticky) {
        $(".content").css({"padding-top": pad_amt}); // I think how or when this is being calculated is the main problem
        header.classList.add("sticky");
    } else {
        header.classList.remove("sticky");
    }
}
</script>

window.onscroll=function（）{myFunction（）}；
var header=document.getElementById（“myHeader”）；
var top_cont=document.getElementById（“顶部容器”）；
函数myFunction（）{
var sticky=顶部控制偏视；
var pad_amt=收割台。离地高度+px；
如果（window.pageYOffset>sticky）{
$（“.content”）.css（{“padding top”：pad_amt}）；//我认为如何或何时计算是主要问题
header.classList.add（“粘性”）；
}否则{
header.classList.remove（“粘性”）；
}
}

以下是整个页面的片段：

身体{
保证金：0；
字体系列：Arial、Helvetica、无衬线字体；
}
#顶部容器{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
背景色：#f1f1；
填充：1px；
文本对齐：居中；
高度：14vw；
}
#顶部容器*，
.标题*{
保证金：0；
}
.标题{
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
背景:#555；
颜色：#f1f1；
高度：12vw；
}
.内容{
填充：16px；
填充顶部：0px；
}
.粘的{
位置：固定；
顶部：0px；
宽度：100%；
}
向下滚动
向下滚动以查看粘性效果

我的头球
滚动粘性标题
到达滚动位置时，收割台将粘在顶部

向上滚动可移除粘性效果

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。Affert laboramus repudiandae nec等人的早期特效师，他的广告是“无痣Volupatibus”。
一些文本可以滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。Affert laboramus repudiandae nec等人的早期特效师，他的广告是“无痣Volupatibus”。
一些文本可以滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。Affert laboramus repudiandae nec等人的早期特效师，他的广告是“无痣Volupatibus”。
一些文本可以滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。Affert laboramus repudiandae nec等人的早期特效师，他的广告是“无痣Volupatibus”。
一些文本可以滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。Affert laboramus repudiandae nec等人的早期特效师，他的广告是“无痣Volupatibus”。
一些文本可以滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。Affert laboramus repudiandae nec等人的早期特效师，他的广告是“无痣Volupatibus”。
一些文本可以滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。Affert laboramus repudiandae nec等人的早期特效师，他的广告是“无痣Volupatibus”。
一些文本可以滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。红背飞虱科
window.onscroll = myFunction;

var header = document.getElementById("myHeader");
var top_cont = document.getElementById("top-container");

var oldOffset = 0;

function myFunction() {
    var sticky = top_cont.offsetHeight;
    var pad_amt = header.offsetHeight + "px";

    var offset = window.pageYOffset;

    // scrolling down
    if (offset > oldOffset) {
        if (offset > sticky) {
            document.getElementsByClassName('content')[0].style.paddingTop = pad_amt;
            header.classList.add("sticky");
        }
    }
    // scrolling up
    else {
        if (offset < sticky) {
            document.getElementsByClassName('content')[0].style.paddingTop = 0;
            header.classList.remove("sticky");
        }
    }

    oldOffset = offset;
}