Alter elements in the DOM based on scrollTop position
Posted on
A small script to make changes after the user has scrolled an x amount from the top, or returning to the top of the screen. An example would be the hamburger menu icon on this site. I’m applying a class to it after the visitor scrolls down to make the icon fixed, for easier accessibility.
|*|-javascript-|*|
<script>
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 375) {
$(".menu-btn").addClass("add-toggle");
}
if (scroll < 475) {
$(".menu-btn").removeClass("add-toggle");
}
});
</script>