Design & Development

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>
Published under: Snippets
Tags: , ,
Previous Design and Development Love

Strengthen WP without installing a plugin

Next Design and Development Love

Roll our own Events with Custom Post Types and Advanced Custom Fields

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.