我的页面上有一个居中的大型标头（我们的徽标以及用户所在的页面/部分），并且当用户滚动通过标头时，会出现一个迷你标头/标头（较小的版本）徽标和用户所在的页面（均保持左对齐）。我要弄清楚的是，如何使从较大的标头到较小的标头的过渡比当前发生的快速跳转更好。
这是我当前的代码：
/*********************************
*
* File: resources/js/system.header_bar.js
*
* JavaScript for Header Bar on page.
*
* Version 1.0.1
*
* Date Created: 20190702.0712
* Date Modified:20190702.1416
*
************************************/
//JavaScript to control Header Scroll.
window.onscroll = function() {
'use strict';
OTE_HeaderFunction();
};
var header = document.getElementById("header-myHeader");
var sticky = header.offsetTop - 50;
var logo_sm = document.getElementById("header-Logo_sm");
var pg_name = document.getElementById("header-Logo_PageName_sm");
function OTE_HeaderFunction() {
'use strict';
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
logo_sm.style.display = "inline";
pg_name.style.display = "inline";
} else {
header.classList.remove("sticky");
logo_sm.style.display = "none";
pg_name.style.display = "none";
}
}/*********************************
*
* File: resources/css/system.bar01_header.css
*
* {{APP DESCR}}
* CSS for Header Bar on page.
*
* Version BAR01_1.0
*
* Date Created: 20190702.0712
* Date Modified:
*
************************************/
.header-top-container {
background: rgb(242, 246, 248);
background: -moz-linear-gradient(180deg, rgba(242, 246, 248, 1) 0%, rgba(222, 230, 235, 1) 51%, rgba(224, 239, 249, 1) 100%);
background: -webkit-linear-gradient(180deg, rgba(242, 246, 248, 1) 0%, rgba(222, 230, 235, 1) 51%, rgba(224, 239, 249, 1) 100%);
background: linear-gradient(180deg, rgba(242, 246, 248, 1) 0%, rgba(222, 230, 235, 1) 51%, rgba(224, 239, 249, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f2f6f8", endColorstr="#e0eff9", GradientType=1);
padding: 10px;
text-align: center;
color: #05336b;
}
.header-top-container h1 {
margin-top: 0;
margin-bottom: 0;
color: white;
/*#05336b;*/
line-height: .5;
font-weight: 600;
font-variant: small-caps;
font-size: 14px;
}
@media screen and (min-width: 300px) {
.header-top-container h1 {
font-size: calc(14px + (32 - 14) * ((100vw - 300px) / (1000 - 300)));
}
}
/* WITHOUT THE BLOCK BELOW, THE FONT WOULD CONTINUE TO GROW */
@media screen and (min-width: 1000px) {
.header-top-container h1 {
font-size: 32px;
}
}
.header-main-logo {
width: calc(275px + (590 - 275) * ((100vw - 300px)/(1600 - 300)));
height: auto;
max-width: 590px;
margin: auto;
}
.header-bar {
padding: 10px 16px;
background: rgb(242, 246, 248);
background: -moz-linear-gradient(0deg, rgba(242, 246, 248, 1) 0%, rgba(222, 230, 235, 1) 51%, rgba(224, 239, 249, 1) 100%);
background: -webkit-linear-gradient(0deg, rgba(242, 246, 248, 1) 0%, rgba(222, 230, 235, 1) 51%, rgba(224, 239, 249, 1) 100%);
background: linear-gradient(0deg, rgba(242, 246, 248, 1) 0%, rgba(222, 230, 235, 1) 51%, rgba(224, 239, 249, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f2f6f8", endColorstr="#e0eff9", GradientType=1);
color: #05336b;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
border: 0 0 4 4 ridge #05336b;
}
.header-bar h3 {
margin-top: 0;
margin-bottom: 0;
color: #05336b;
line-height: .5;
display: none;
font-weight: 600;
font-variant: small-caps;
}
.content {
padding: 16px;
/*background: #05336b;*/
}
.sticky {
position: fixed;
top: 0;
width: 100%;
-webkit-box-shadow: 7px 9px 22px 0px rgba(159, 168, 218, .75);
;
-moz-box-shadow: 7px 9px 22px 0px rgba(159, 168, 218, .75);
;
box-shadow: 7px 9px 22px 0px rgba(159, 168, 218, .75);
;
display: inline;
}
.sticky+.content {
padding-top: 102px;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- other formatting and style sheets here -->
<!-- Page Header -->
<title>User Menu</title>
<style>
.header-main-logo {
width: calc(275px + (590 - 275) * ((100vw - 300px)/(1600 - 300)));
height: auto;
max-width: 590px;
margin: auto;
}
.menu-bar-item {
font-size: calc(12px + (24 - 12) * ((100vw - 300px)/(1600 - 300)));
text-align: center;
font-weight: 600;
}
</style>
</head>
<body>
<div class="header-top-container">
<div class="w3-mobile w3-content">
<h1>
<img src="./resources/logo/bc_ote_scfe_PMS288.png" alt="Logo" class="header-main-logo" />
<br>
<span id="header-Logo_PageName_lg">5t3User Menu </span>
</h1>
</div>
</div>
<div class="header-bar" id="header-myHeader">
<img src="./resources/logo/bc_ote_scfe_PMS288.png" alt="Logo (Smaller)" style="width:30%;height:auto;max-width:350px;display: none;" id="header-Logo_sm" /><br />
<h3 id="header-Logo_PageName_sm">User Menu</h3>
</div>
<div class="content">
<div class="w3-row-padding w3-mobile">
<div class="w3-content">
<!-- YOUR CONTENT HERE -->
</div>
</div>
</div>
<script src="./resources/js/system.header_bar.js"></script>
</body>
</html>
我想做的是让徽标从头顶容器到头栏的过渡如此平稳。