我试图在这里找到一个解决方案，但找不到我想要的东西。
它是一个与一些JavaScript代码功能相关的简单问题。
我将我的代码简化为任何人都可读。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<style>
#my-nav {
position: sticky;
top: 0;
height: 150px;
background: #000;
}
</style>
</head>
<body>
<nav id="my-nav"></nav>
<script>
navScroll();
window.onscroll = function () { navScroll() };
function navScroll(){
var nav = document.getElementById('my-nav');
if(document.body.scrollTop > 50 || document.documentElement.scrollTop > 50){
nav.style.height= "40px";
}
else {
nav.style.height="150px";
}
}
</script>
</body>
</html>
现在让我们在nav标签之后添加任何内容来测试滚动功能。当您向下滚动某些特定像素时，该功能应简单地调整导航栏的大小，并在返回顶部时返回其大小。
但是，您将看到该功能将继续切换，导航栏将继续“不断”调整大小。 （特别是在Firefox上，性能问题会更清晰，我们会发现它的速度很慢。）
更改高度时，此代码会修改页面布局。因此，scrolltop值会反复变化。使用position:fixed不折叠布局。
<nav id="my-nav"></nav>
<div id="nav-space"></div>
#nav-space {
height: 200px;
}
#my-nav {
position: fixed;
top: 0;
width: 100%;
height: 150px;
background: #000;
}
您可能会遇到Throttling和Debouncing事件危机。为了更好地理解JS事件触发，这些将帮助您我猜：
https://www.sitepoint.com/throttle-scroll-events/
How to debounce or throttle scroll events in iOS devices ( Safari )
https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf