Title: Add class when scroll a certain amount
Last modified: August 31, 2016

---

# Add class when scroll a certain amount

 *  [aschoenbrun](https://wordpress.org/support/users/aschoenbrun/)
 * (@aschoenbrun)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/add-class-when-scroll-a-certain-amount/)
 * Hi,
 * I was wondering how to add a class to an element when the user scrolls to a certain
   point. On the current project I need to have a smaller header drop into view 
   when the larger one scrolls out of sight. Even if there may be a more specified
   way of doing this, I would like the “add class” option because it would be more
   versatile.
 * I am a relative newbie with jquery so I would prefer javascript. However, any
   help would be much appreciated.
 * Thank you.

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [Hardeep Asrani](https://wordpress.org/support/users/hardeepasrani/)
 * (@hardeepasrani)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/add-class-when-scroll-a-certain-amount/#post-7089818)
 * Hi,
 * You can use the following jQuery to do such task:
 *     ```
       $(window).scroll(function() {
           var scroll = $(window).scrollTop();
   
           if (scroll >= 500) {
               $(".clearHeader").addClass("darkHeader");
           } else {
               $(".clearHeader").removeClass("darkHeader");
           }
       });
       ```
   
 * It will add the class **darkHeader** to the element with class **.clearHeader**.
 *  Thread Starter [aschoenbrun](https://wordpress.org/support/users/aschoenbrun/)
 * (@aschoenbrun)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/add-class-when-scroll-a-certain-amount/#post-7089870)
 * Thanks Hardeep.
 * It seems, though, that I get an error when applied. Console outputs: “$ is not
   a function”. Only when I replace all instances of “$” with “jQuery” does it work.
 * I enqueued the script in functions.php as follows:
 *     ```
       add_action( 'wp_enqueue_scripts', 'add_my_script' );
       function add_my_script() {
           wp_enqueue_script(
               'HeaderChangeOnScroll', // name your script so that you can attach other scripts and de-register, etc.
               get_template_directory_uri() . '/assets/js/HeaderChangeOnScroll.js', // this is the location of your script file
               array('jquery') // this array lists the scripts upon which your script depends
           );
       }
       ```
   
 * Have I done something wrong?
 * Thanks
 *  [Hardeep Asrani](https://wordpress.org/support/users/hardeepasrani/)
 * (@hardeepasrani)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/add-class-when-scroll-a-certain-amount/#post-7089871)
 * Not really. If it works with jQuery then that’s fine too. 🙂
 *  Thread Starter [aschoenbrun](https://wordpress.org/support/users/aschoenbrun/)
 * (@aschoenbrun)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/add-class-when-scroll-a-certain-amount/#post-7089873)
 * True!
    But it would be nice to write things shorthand if possible.
 *  [Hardeep Asrani](https://wordpress.org/support/users/hardeepasrani/)
 * (@hardeepasrani)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/add-class-when-scroll-a-certain-amount/#post-7089918)
 * But this will do:
 *     ```
       jQuery( document ).ready(function( $ ) {
       	$(window).scroll(function() {
       	    var scroll = $(window).scrollTop();
   
       	    if (scroll >= 500) {
       		$(".clearHeader").addClass("darkHeader");
       	    } else {
       		$(".clearHeader").removeClass("darkHeader");
       	    }
       	});
       });
       ```
   
 * 🙂

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Add class when scroll a certain amount’ is closed to new replies.

## Tags

 * [add class](https://wordpress.org/support/topic-tag/add-class/)
 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [jquery](https://wordpress.org/support/topic-tag/jquery/)
 * [onScroll](https://wordpress.org/support/topic-tag/onscroll/)
 * [scroll](https://wordpress.org/support/topic-tag/scroll/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 5 replies
 * 2 participants
 * Last reply from: [Hardeep Asrani](https://wordpress.org/support/users/hardeepasrani/)
 * Last activity: [10 years, 2 months ago](https://wordpress.org/support/topic/add-class-when-scroll-a-certain-amount/#post-7089918)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics