我有一个关于Drupal 8网站的简短jquery-如果用户向下滚动页面，标题背景会改变颜色。但是，如果用户已经向下滚动页面，然后重新加载页面，则标题div 将恢复为原始颜色。它不再知道页面处于较低位置。在用户滚动之前，它不会再次更改。
如何重新设计此脚本，以便在重新加载时知道页面位置并相应地执行脚本操作。
(function ($) {
$(document).scroll(function () {
var $header = $(".headerbox");
$header.toggleClass('scrolled', $(this).scrollTop() > $header.height());
if ($(this).scrollTop() > 81) {
$('#block-branding a img').attr('src','/themes/custom/logo-white.svg');
$('.headerwrap').css('height','7em');
}
if ($(this).scrollTop() < 80) {
$('#block-branding a img').attr('src','/themes/custom/logo.svg');
$('.headerwrap').css('height','10em');
}
});
})(jQuery);
使标头更新为函数，并在加载时调用它。
(function ($) {
function updateHeader() {
//console.log($(this).scrollTop());
var $header = $(".headerbox");
$(".headerwrap").toggleClass('scrolled', $(this).scrollTop() > $header.height());
if ($(this).scrollTop() > $header.height()) {
//$('#block-branding a img').attr('src','/themes/custom/logo-white.svg');
$('.headerwrap').css('height','7em');
} else {
//$('#block-branding a img').attr('src','/themes/custom/logo.svg');
$('.headerwrap').css('height','10em');
}
}
$(document).scroll(updateHeader);
window.onload = updateHeader();
})(jQuery);.headerwrap {
position: fixed;
top: 0;
right: 0;
left: 0;
margin: 0;
background-color: rebeccapurple;
color: white;
padding: 0;
}
.headerbox {
padding: 8px;
}
.scrolled {
background-color: lightgreen;
color: black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="headerwrap">
<h1 class="headerbox">Header</h1>
</header>
<body onclick="window.location.reload()" style="margin: 0; margin-top: 10em; padding: 8px;">
<h1>Body</h1>
<p>
body
<br>body<br>body<br>body<br>body<br>body<br>body<br>body
<br>body<br>body<br>body<br>body<br>body<br>body<br>body
<br>body<br>body<br>body<br>body<br>body<br>body<br>body
<br>body<br>body<br>body<br>body<br>body<br>body<br>body
<br>body<br>body<br>body<br>body<br>body<br>body<br>body
<br>body<br>body<br>body<br>body<br>body<br>body<br>body
<br>body<br>body<br>body<br>body<br>body<br>body<br>body
</p>
</body>