Over at this website, there's a top navbar that shrinks using jQuery when scrollTop exceeds 100px. The functionality works as intended, but there's an annoying stutter issue where the navbar starts jumping up and down erratically after slight scrolling past the threshold. I'm stumped on what's causing this problem and how to resolve it. Any suggestions?
$(document).on("scroll", function() {
if ($(document).scrollTop() > 100) {
$("header").addClass("shrink");
} else {
$("header").removeClass("shrink");
}
});header.is-fixed {
position: sticky;
z-index: 9999;
left: 0;
right: 0;
top: 0;
padding: 1.5rem 0;
transition: 0.2s;
background-color: #333;
}
header.shrink {
padding: 0.75rem 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="is-fixed">
<div class="container">
<nav class="navbar" role="navigation" aria-label="main navigation">
Content here
</nav>
</div>
</header>
<div style="height:2000px; background-color:red">
</div>