Here’s a little snippet which is useful for manipulating elements on window scroll events.
const sc = {
header: $('#masthead').height(),
activeHeader: 80,
scroll: 0,
active: ($('#masthead').hasClass('fixy') ? true : false),
}
$(window).scroll(function(){
sc.scroll = Math.round($(this).scrollTop())
if(sc.scroll%2 === 0) {
if (!sc.active) {
sc.header = $('#masthead').height()
}
let h = sc.header
if (sc.scroll >= (h - sc.activeHeader) && !sc.active) {
$('#masthead').addClass('fixy').css('height', h)
} else if(h > sc.scroll){
$('#masthead').removeClass('fixy').attr('style', '')
}
}
})