Change class when scroll reaches div

by Daniel Morgan

HTML

<body>

<div class="content"></div>

<div class="header sticky">
  <div class="nav">links</div>
</div>

<div class="content"></div>

</body>

CSS

.content {
  height: 120vh;
  background: blue;
}
.header {
  background: green;
  height: 2em;
}
.nav {
  color: white;
}
.sticky .nav {
  position: fixed;
  top: 1em;
  left: 1em;
}
.static .nav {
  position: static;
}

JavaScript

$(function() {
    var header = $(".header");
    
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();
        var position = header.offset().top;
    
        if (scroll >= position) {
            header.removeClass('sticky').addClass("static");
        } else {
            header.removeClass("static").addClass('sticky');
        }
    });
});