change header on scroll

  • greencrest

    (@greencrest)


    3 years ago

    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 3 years ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic
Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    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

    (@greencrest)

    Thanks bcworkz. Do you have any reference on how to do this? I’m not very adept at JS.

    Moderator bcworkz

    (@bcworkz)

    Randomly found after a quick search:
    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.