Title: change header on scroll
Last modified: November 25, 2021

---

# change header on scroll

 *  [greencrest](https://wordpress.org/support/users/greencrest/)
 * (@greencrest)
 * [4 years, 5 months ago](https://wordpress.org/support/topic/change-header-on-scroll/)
 * I’m trying to set up a header that is using a different logo and class on the
   home page from the rest of the site — but also reverts to a consistent sticky
   header on scroll. Are there any plugins that anyone knows of that can swap out
   a different header on the home page, or do I need to customize this? I can’t 
   find anything other than using Elementor, which I don’t want to use.
 * Options I was thinking if there is no plugin:
    1. create a duplicate header for
   the home page that uses a different logo image (can control the styles by using
   the .home class)
 * 2. Using javascript to swap header on home page until the sticky header kicks
   in (not my area of expertise in coding)
 * Any recommendations?
    -  This topic was modified 4 years, 5 months ago by [Jan Dembowski](https://wordpress.org/support/users/jdembowski/).
      Reason: Moved to Fixing WordPress, this is not an Developing with WordPress
      topic

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

 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [4 years, 5 months ago](https://wordpress.org/support/topic/change-header-on-scroll/#post-15111112)
 * You’ll need JavaScript to listen for the scroll event no matter what. What the
   script does can vary. Probably the simplest is to have two different headers 
   occupying the same (or immediately adjoining) page space. One’s visibility is
   set by default to `none`. Have the scroll event listener simply swap CSS visibility
   of the two headers.
 *  Thread Starter [greencrest](https://wordpress.org/support/users/greencrest/)
 * (@greencrest)
 * [4 years, 5 months ago](https://wordpress.org/support/topic/change-header-on-scroll/#post-15113475)
 * Thanks bcworkz. Do you have any reference on how to do this? I’m not very adept
   at JS.
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [4 years, 5 months ago](https://wordpress.org/support/topic/change-header-on-scroll/#post-15114653)
 * Randomly found after a quick search:
    [https://codepen.io/clemt/pen/mKMGGx](https://codepen.io/clemt/pen/mKMGGx)

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

The topic ‘change header on scroll’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 3 replies
 * 2 participants
 * Last reply from: [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * Last activity: [4 years, 5 months ago](https://wordpress.org/support/topic/change-header-on-scroll/#post-15114653)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics