I've been struggling to resize a fixed header when the page is scrolled. Unfortunately, I'm having trouble getting the header to adjust its size as the scrolling happens.
$(document).scroll(function() {
navbarScroll();
});
function navbarScroll() {
var y = window.scrollY;
if (y > 10) {
$('.Header').addClass('small');
} else if (y < 10) {
$('.Header').removeClass('small');
}
}.Header {
width: 100%;
position: fixed;
z-index: 1000;
border-bottom: solid 2px #d8341f;
}
.Header--top {
display: block;
background: #fafafa;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
.tweak-site-width-option-full-background .Header-inner {
max-width: 1140px;
margin-left: auto;
margin-right: auto;
}
.Header .Header--top {
position: fixed;
width: 100%;
font-weight: bold;
transition: .3s;
// header shrinks when .small added to .Header
&.small {
height: 70px;
box-shadow: 0 0 5px rgba(black, .2);
// when Header.small also change page offset
&~.offset {
padding-top: 140px;
}
// when Header.small change logo pad & font size
.header_logo {
padding-top: 20px;
font-size: 20px;
text-shadow: none;
}
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="Header Header--top">
<div class="Header-inner Header-inner--top" data-nc-group="top">
<div data-nc-container="top-left">
<a href="/" class="Header-branding" data-nc-element="branding" data-content-field="site-title">
<img src="//static1.squarespace.com/static/5aa819f2aa49a1758e33b803/t/5aa85d9cec212dd645589158/1524261284838/?format=1500w" alt="Red Corp USA" class="Header-branding-logo">
</a>
</div>
<div data-nc-container="top-center"></div>
<div data-nc-container="top-right">
<nav class="Header-nav Header-nav--primary" data-nc-element="primary-nav" data-content-field="navigation">
<div class="Header-nav-inner">
<a href="/about/" class="Header-nav-item" data-test="template-nav">About</a><a href="/commercial/" class="Header-nav-item" data-test="template-nav">Commercial</a><a href="/residential/" class="Header-nav-item" data-test="template-nav">Residential</a>
<a href="/hospitality/" class="Header-nav-item" data-test="template-nav">Hospitality</a><a href="/projects/" class="Header-nav-item" data-test="template-nav">Projects</a><a href="/contact/" class="Header-nav-item" data-test="template-nav">Contact</a>
<a
href="tel:+1.301.785.2400" target="_blank" class="Header-nav-item">Call Now</a>
</div>
</nav>
</div>
</div>
</header>If you want to see an example of what I'm trying to achieve, take a look at . You can find my current site at for reference.
I would greatly appreciate any assistance on this matter.