如何使用CSS视差在滚动时调整粘性标头的大小？

Question

当用户从文档顶部向下滚动600px时，我想调整粘性标头徽标的大小，但是由于我添加了视差容器，因此此javascript部分似乎不再起作用。我设法平滑滚动到所有有效的链接。

我尝试像平滑滚动一样修改粘性标头脚本以将视差容器定位为目标，但是我不是JS专家。

<header>
<nav class="navbar navbar-expand-lg fixed-top navbar-light">
<div class="container">
<h1><a class="navbar-brand" href="#"><img id="imgnav" src="img/143.png" alt="Cupcakes shop"></a></h1>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="justify-content-end collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a></li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a></li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a></li>
<li class="nav-item">
<a class="nav-link" href="#section4">Section 4</a></li>
</ul>
</div>
</nav>
</div>
</header>

当用户从文档顶部向下滚动600px时，请调整标题徽标的大小

<script>
window.onscroll = function () { scrollFunction() };
function scrollFunction() {
if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 
600) {
document.getElementById("imgnav").style.width = "30%";
} else {
document.getElementById("imgnav").style.width = "50%";
}
}
</script>

由Caroline Veilleux https://www.w3schools.com/howto/howto_js_shrink_header_scroll.asp

修改

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>

为所有链接添加平滑滚动

<script>
$(document).ready(function () {
$("a").on('click', function (event) {

在覆盖默认行为之前，请确保this.hash具有值

if (this.hash !== "") {

防止默认的锚定点击行为

event.preventDefault();

存储哈希

var hash = this.hash;

使用jQuery的animate（）方法添加平滑的页面滚动 可选数字（800）指定滚动到指定区域所需的毫秒数

$('#parallax-container').animate({scrollTop: $(hash).offset().top}, 800, 
function () {

滚动完成后将哈希（＃）添加到URL（默认点击行为）

window.location.hash = hash;});
}
});
});
</script>

参考：https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll 请参考以视差修复脚本问题：https://keithclark.co.uk/articles/practical-css-parallax/

实际上，我的标头徽标在滚动时不会改变，我希望它会缩小。