如何平滑从大标题到小静态标题的转换（Javascript/CSS）

我的页面上有一个大的居中的报头（我们的徽标和用户所在的页面/部分），当用户滚动过报头时，会出现一个小报头/报头（徽标的较小版本和用户所在的页面，都是左对齐的）。我想弄清楚的是，如何使从较大的桅杆头到较小的桅杆头的过渡看起来比当前发生的快速跳跃切割更好

这是我目前的代码：

/*********************************
*
*文件：resources/js/system.header\u bar.js
* 	 
*页面上标题栏的JavaScript。
*
*版本1.0.1
*
*创建日期：20190702.0712
*修改日期：20190702.1416
* 
************************************/
//JavaScript来控制标题滚动。
window.onscroll=函数（）{
"严格使用",；
OTE_HeaderFunction（）；
};
var header=document.getElementById（“header myHeader”）；
var sticky=收割台偏移量-50；
var logo_sm=document.getElementById（“header-logo_sm”）；
var pg_name=document.getElementById（“header-Logo_PageName_sm”）；
函数OTE_HeaderFunction（）{
"严格使用",；
如果（window.pageYOffset>sticky）{
header.classList.add（“粘性”）；
logo_sm.style.display=“inline”；
pg_name.style.display=“inline”；
}否则{
header.classList.remove（“粘性”）；
logo_sm.style.display=“无”；
pg_name.style.display=“无”；
}
}

/*********************************
*
*文件：resources/css/system.bar01_header.css
* 	 
*{{APP DESCR}}
*页面上标题栏的CSS。
*
*BAR01_1.0版
*
*创建日期：20190702.0712
*修改日期：
* 
************************************/
.顶盖容器{
背景：rgb（242、246、248）；
背景：莫兹线性梯度（180度，rgba（242，246，248，1）0%，rgba（222，230，235，1）51%，rgba（224，239，249，1）100%）；
背景：webkit线性梯度（180度，rgba（242，246，248，1）0%，rgba（222，230，235，1）51%，rgba（224，239，249，1）100%）；
背景：线性梯度（180度，rgba（242、246、248、1）0%，rgba（222、230、235、1）51%，rgba（224、239、249、1）100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr=“#f2f6f8”，endColorstr=“#e0eff9”，GradientType=1）；
填充：10px；
文本对齐：居中；
颜色：#05336b；
}
.收割台顶部容器h1{
边际上限：0；
页边距底部：0；
颜色：白色；
/*#05336b*/
线高：.5；
字号：600；
字体变体：小大写字母；
字体大小：14px；
}
@媒体屏幕和屏幕（最小宽度：300px）{
.收割台顶部容器h1{
字体大小：calc（14px+（32-14）*（（100vw-300px）/（1000-300））；
}
}
/*如果没有下面的块，字体将继续增长*/
@媒体屏幕和屏幕（最小宽度：1000px）{
.收割台顶部容器h1{
字体大小：32px；
}
}
.标题主标志{
宽度：计算（275px+（590-275）*（（100vw-300px）/（1600-300））；
高度：自动；
最大宽度：590px；
保证金：自动；
}
.标题栏{
填充：10px 16px；
背景：rgb（242、246、248）；
背景：莫兹线性梯度（0度，rgba（242，246，248，1）0%，rgba（222，230，235，1）51%，rgba（224，239，249，1）100%）；
背景：webkit线性梯度（0度，rgba（242，246，248，1）0%，rgba（222，230，235，1）51%，rgba（224，239，249，1）100%）；
背景：线性梯度（0度，rgba（242，246，248，1）0%，rgba（222，230，235，1）51%，rgba（224，239，249，1）100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr=“#f2f6f8”，endColorstr=“#e0eff9”，GradientType=1）；
颜色：#05336b；
-moz边界半径：0px 0px 10px 10px；
-webkit边界半径：0px 0px 10px 10px；
边界半径：0px 0px 10px 10px；
边界：0 0 4 4脊#05336b；
}
.标题栏h3{
边际上限：0；
页边距底部：0；
颜色：#05336b；
线高：.5；
显示：无；
字号：600；
字体变体：小大写字母；
}
.内容{
填充：16px；
/*背景#05336b*/
}
.粘的{
位置：固定；
排名：0；
宽度：100%；
-网络工具包盒阴影：7px 9px 22px 0px rgba（159、168、218、75）；
;
-moz盒阴影：7px 9px 22px 0px rgba（159、168、218、75）；
;
盒影：7px 9px 22px 0px rgba（159、168、218、75）；
;
显示：内联；
}
.粘性+.内容{
填充顶部：102px；
}

用户菜单
.标题主标志{
宽度：计算（275px+（590-275）*（（100vw-300px）/（1600-300））；
高度：自动；
最大宽度：590px；
保证金：自动；
}
.菜单栏项{
字体大小：calc（12px+（24-12）*（（100vw-300px）/（1600-300））；
文本对齐：居中；
字号：600；
}


5T3用户菜单


用户菜单

您可以尝试添加一个将使其更平滑地发生并提供好看的动画效果。

您可以尝试添加一个将使其发生更平滑并提供好看的动画效果