Javascript 将两个条合并为一个粘性标题，顶部条改变高度

我有两个吧台，一个顶部吧台和一个面包屑吧台。当两个杆未组合时，顶部杆较高。在某个点上，这些条组合成一个粘性头。下面的代码片段展示了这个概念

$（（）=>{
常数轴=500-145；
$（窗口）.on（'滚动'，（）=>{
常量scrollTop=$（窗口）.scrollTop（）；
$（'body'）.toggleClass（'after-pivot'，scrollTop>pivot）；
});
});
.bar{
宽度：100%；
显示：块；
-webkit过渡：全部.25秒轻松；
过渡：全部.25秒缓解；
}
酒吧：以前{
内容：“；
显示：内联块；
垂直对齐：中间对齐；
身高：100%；
}
.酒吧顶{
高度：60px；
位置：固定；
排名：0；
左：0；
利润上限：85px；
背景：rgba（1,1,1,0.1）；
}
.在枢轴后.杆.顶部{
背景：黑色；
边际上限：0；
}
.面包屑{
背景：红色；
高度：40px；
}
.轴后.条.面包屑{
位置：固定；
顶部：60px；
}
.bar>*{
垂直对齐：中间对齐；
}
.按钮{
高度：20px；
文字装饰：无；
颜色：白色；
背景：灰色；
填充：4px10px；
}
.形象{
高度：500px；
背景：url（“http://placehold.it/2000x500");
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
}
身体{
高度：500vh；
填充：0；
保证金：0；
}
p{
保证金：5px0；
}

主页-我的怪异页面
Lorem ipsum dolor sit amet，是一位杰出的献身者。奥古斯湖（lacus augue）、二级发酵、三级发酵。这是一种侵权行为。无尼布猫。在malesuada urna项目中，前毛里斯·拉齐尼亚（Mauris lacinia）项目
同侧或枕叶舌。在康瓦利斯·维利特（convallis velit）的佩伦茨克·维塔·帕特·尼布（Pat nibh）。埃尼安·塞德·马萨。前庭是一座庄严的宫殿。Pellentesque et viverra nisi.
在CSS中定位
绝对
如何，在pivot
之前添加一个
，使其在
就绪时通过JS固定
只要
滚动顶部
？在此之后，在这段短时间内，
.top.bar
将具有绝对定位，直到它到达顶部，此时将添加一个
.After pivot
类。仍然需要一个
secondPivot
点才能工作，但在这种情况下，不需要逐渐降低保证金

基本上，
.top.bar
的类从透视前的


$（（）=>{
常数轴=500-145；
const secondPivot=500-60；
$（窗口）.on（'滚动'，（）=>{
常量scrollTop=$（窗口）.scrollTop（）；
$（'body'）.toggleClass（'before-pivot'，scrollTopsecondPivot）；
});
$（window.scroll（）；
});
.bar{
宽度：100%；
显示：块；
-webkit过渡：背景。25秒轻松；
过渡：背景。25秒轻松；
}
酒吧：以前{
内容：“；
显示：内联块；
垂直对齐：中间对齐；
身高：100%；
}
.酒吧顶{
高度：60px；
位置：绝对位置；
排名：0；
左：0；
边缘顶部：计算（440px）；
背景：rgba（1,1,1,0.1）；
}
.在枢轴前.杆.顶部{
位置：固定；
利润上限：85px；
}
.在枢轴后.杆.顶部{
背景：#000；
位置：固定；
边际上限：0；
}
.面包屑{
背景：红色；
高度：40px；
}
.轴后.条.面包屑{
位置：固定；
顶部：60px；
}
.bar>*{
垂直对齐：中间对齐；
}
.按钮{
高度：20px；
文字装饰：无；
颜色：白色；
背景：灰色；
填充：4px10px；
}
.形象{
高度：500px；
背景：url（“http://placehold.it/2000x500");
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
}
身体{
高度：500vh；
填充：0；边距：0；
}
p{
保证金：5px0；
}

主页-我的怪异页面
Lorem ipsum dolor sit amet，是一位杰出的献身者。奥古斯湖（lacus augue）、二级发酵、三级发酵。这是一种侵权行为。无尼布猫。在我们的研究中，我们使用了同侧或枕侧的前毛里斯·拉齐尼亚舌苔（Mauris lacinia ligula）。在康瓦利斯·维利特（convallis velit）的佩伦茨克·维塔·帕特·尼布（Pat nibh）。埃尼安·塞德·马萨。前庭是一座庄严的宫殿。佩伦茨克和维韦拉·尼西

暂时的痛苦。我们的拍卖人，奥古斯·非拍卖人，是一对和蔼可亲的酒后驾车者。莫利斯·波苏尔·拉库斯，鼠疫。电力变压器的相位为零。耳道前庭。在我的生活中，他是一个酒鬼。毛里斯和猫咪坐在门前。Proin posuere fringilla suscipit。普罗因欧盟港口巨头。两个酒鬼，一个酒鬼，一个酒鬼，一个酒鬼，一个酒鬼。整型安美特·比本杜姆·利古拉。猫前庭、猫前庭、猫前庭、猫前庭、猫前庭。纳拉姆·苏西比特·尼布·塞德·泰卢斯·康莫多，在拉奥里特对波苏尔。阿利夸姆pulvinar arcu sem，位于bibendum augue dapibus的。奎斯克·马蒂斯、莱克托·奥纳雷·普雷蒂姆·尼布在《大宪章》上的演讲。疯狂的爱

这是我的名字，是我的名字。Morbi和neque是一种美味的调味品。Nunc id neque调味品、pulvinar enim tincidunt、cursus turpis。这是一种伏隔舌。Donec Consequeat dui mauris，vitae hendrerit enim hendrerit sed。Quisque nisl lorem，厄洛斯·埃吉特（eros-eget）中的varius，ullamcorper rhoncus sem。毛里斯·尤伊斯莫德·迪亚姆·尤伊斯莫德

直径为a的前庭，入口为ac。在《马蒂斯·洛雷姆》中，一个自由的继承者是一个侵权者。库拉比图尔那、比本杜姆门、奥尔基分子效率。ultricies urna酒后驾车，ullamcorper aliquam酒后驾车。Present posuere enim massa，欧盟资深大律师