Elementor Hide Header on Scroll Down - Show on Scroll Up 1
Get Premium

Elementor Hide Sticky Header on Scroll Down - Show on Scroll Up

No extra plug-ins required! Elementor Pro Required.

Easily make your Elementor sticky header hidden on scroll down, and show while scrolling back up the page.

To begin with, create your header, and make it sticky

It will also need a background color.

Elementor Hide Header on Scroll Down - Show on Scroll Up 2


Then, give that header section the CSS ID of ' stickyheaders '

Also give it a z-index value of 199.

Elementor Hide Header on Scroll Down - Show on Scroll Up 3

Finally, add this code in an html element

This html element needs to be in the same page as the header. If you create this in a header template, place the html element somewhere in the header template.

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Hide Header on Scroll Down - Show on Scroll Up tutorial 
 * Found at this URL https://element.how/elementor-header-show-scroll-up/ 
 */ 
</script>

That's it! If your section is the initial one in the page or template.

If your sticky header is not the very first section of the page or template, you will need to modify

if (mypos > 40) {

to the approximate height, in PX, of the bottom of your sticky header from the top of the page. example:

if (mypos > 740) {

Et Voila! Simple!

When you know the code… let me know if you need help!

Tagged ,

187 Responses

  1. Thanks for your fantastic website and help! I have a question.

    Using this tutorial you have provided, I now have 2 headers:

    - "Header" (before you scroll down)
    - "sticky-header" which appears when you scroll up after already scrolling down)

    I would like them to be styled differently.

    Question: How do you apply CSS to them separately?

    For example, I want:

    Header
    0% white

    Sticky-header
    100% white
    padding: 10px auto
    box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.05);

    Many thanks!

      1. Thanks a lot for your input. 🙂

        But it's not quite what I am after.

        We DO want a sticky header that only appears if the user is scrolling up. The tutorial you provided seems to not do this.

        Are you sure there isn't a way to have both?

        Both being:

        1. A sticky header that only appears when user is scrolling up
        2. The ability to change the CSS of the sticky header and make it a little different to the standard header (before scrolling down)

      2. Extra update.

        I am confused. I used the Chrome/Firefox Inspector to find the Class which is for the sticky header only:

        .elementor-sticky--effects

        Then I used this CSS

        .elementor-sticky--effects {
        background-color:white !important;
        padding:10px auto !important;
        box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.05) !important;
        }

        It works perfectly (1) in the elementor page editor interface and the (2) browser inspector. But when I click Update and try and view the page without being logged in, the styling disappears.

        Any ideas?

        Site - https://granddemo.com/altus/blocks/

      3. Hey Grand!

        Well, sounds like what you are doing is right in fact. So I suspect some cache issue. Did you Try WP > Elementor > Tools > Regenerate CSS files ?

        Did you flush your cache from PhastPress and from your CDN, if you have one?

        Also an other issue: If I open the DevTools (F12), go in the network tab, filter by CSS files, I see post-2230.css as a 404. So if that's where your header stylings are, that would be the issue...

        Hope this helps.

  3. I'm using a website builder by Ionos formerly 1&1. I can't seem to get this to work 🙁 Maybe Im not understanding right... I copied and pasted in the header custom html/css section., but nothing has happened.
    Will this code for every header?

  5. Hi, Thanks a lot. I´ve seen that when you use the toogle menu in IOS, at least in IPHONE, the first element of the menu appears with a blue border and just the first time that you open the menu in the same page, but not the second tiem you open it that that border dissapear.

    If you click on an item of the menu and go to a differente page, happens the same, the first time you open the menu the first item appears wiuth the blue border but not the second time.

    Can you help me to find a solution?

    Thanks a lot

  6. After lokking for a solution during 6 hours, I fouded it. Must use this css rule:
    a{
    outline: none;
    }
    Closed thread.
    Thanks

  7. Goodmorning Maxime,

    I'm trying to combine the 2 tutorials you wrote, this one and https://element.how/elementor-change-header-on-scroll/ But i can't get it to work.

    I have the website maaike.pucoo.nl. After the header that is 1000px, the scroll up and down functie should be working. But when you're below the 1000px the function shouldn't work because you will see the menu build in the header.

    Right know the menu shows after the header, that part is almost good, but after the header the menu shouldn't just show up, only if you scroll up when you've passed the header down.

    Hope you can give me some tips.

  8. Hello Maxime! this works like a charm currently i have 2 headers, one transparent with white colors, logos etc and the normal one when the user scrolls up, when i add your code obviously the sticky one gets on top and then it works as usual, is there a way to hide the sticky one until the users scrolls and then show it again when scrolls up? probably i'm not making sense, i'm trying to combine 2 tutorials! lol

    1. Hey Ben!

      Yes I understand, this gets a bit complex and specific. The kind of thing I would offer as custom work rather. Hope you understand.

      Cheers!

  10. Hi, thank you for the script.

    But I am having a bug in Safari, when the bottom is hit, the header shows again.
    Not doing it on Chrome.

    Cheers!

  12. Just a BIG THANK YOU from me. This was very helpful - your tutorial and responses to questions allowed me to achieve the desired effect. Thanks again!

      1. Hi Maxime. Me again. 😁

        I have a mobile and desktop header. I managed to use the code on the mobile header and it worked fine. I then added it to desktop and it stopped working on the mobile site. Does it only work with one header?

        If that's the case, I guess I can edit to just one header.

        Thanks again!

        Kam

    2. Greetings Kam!

      In that case, change to class names intead of an ID (which should be unique and only one time on the page).

      So change instances of

      #stickyheaders

      to

      .stickyheaders

      in the code.

      In the CSS, you might need it twice to have greater specificity:

      .stickyheaders.stickyheaders {
      transition : transform 0.34s ease;
      }

      Cheers!

  13. Hi -

    on mobile i can scrolling a little bit to the right because the sticky header is a little to big - i dont know why and its only when im using your code..
    thx

    1. Greetings,

      Sorry about that... I don't really know why that would be. Both should be able to work together fine, but maybe it depends on your exact setup.

  15. Hi, I did everything as in the tutorial, but a small piece of my header peeks out when I scroll down. I have also set the height of the header in the custom code.

    What could be the reason for this?

  16. Hi Maxime!
    Amazing piece of code! It worked fine for me, but just until i activated Elementors scroll snap!
    Now the header just stays sticky without moving away!
    Do you have any idea why this is happening?
    Help highly appreciated!
    Best..

    1. I have this issue too, it works on pages without scroll snap, but I have scroll snap on the homapge, so this doesn work - any ideas or help?

  17. Something worth noting - First this code worked perfectly! Second - I had problems but they were my own fault. You need to make sure that all other settings for the container for the header are clear (reset them to default) Specifically, anything in the Motion Effects and Transform. Once I reset those to default values the header functioned perfectly. Thank you for this code!

    1. Yes, change this part:

      #stickyheaders{
      transition : transform 0.34s ease;
      }
      .headerup{
      transform: translateY(-110px); /*adjust this value to the height of your header*/
      }

      to this:

      #stickyheaders{
      transition: opacity 0.34s ease;
      }
      .headerup{
      opacity: 0;
      pointer-events: none;
      }

  20. Hello! Thank you so much for this code, it's fantastic!

    Do you know why the effect only works on one page of my website and not on the others?

    Thank you

      1. Thank you, the problem is solved. The issue was my fault, not your code.
        My header is transparent, but when the site loads, the background still appears for one second and then disappears. Is it possible to add a line to your code so that the header background doesn't load but appears when scrolling up?

  21. This post was really helpful for me in getting my disappearing footer to work! Thank you Maxime. Beyond getting it to work for the footer, I also tweaked it a bit to disappear faster when the user starts to scroll down/up, and keep the footer pinned to the bottom of the viewport even on pages with very little content. If it helps anyone, here is my code (used in an HTML widget at the end of my Elementor footer container, which is set to Sticky Bottom):

    <scriptDELETEME>
    document.addEventListener('DOMContentLoaded', function () {
    jQuery(function ($) {
    var mywindow = $(window);
    var mypos = mywindow.scrollTop();
    let scrolling = false; /* For throlling scroll event */
    window.addEventListener('scroll', function () {
    scrolling = true;
    });
    setInterval(() => {
    if (scrolling) {
    scrolling = false;
    if (mypos > 10) { /* hide after scrolling XXpx total from top */
    if (mywindow.scrollTop() > mypos) {
    $('#your-css-id-here').addClass('footerdown');
    } else {
    $('#your-css-id-here').removeClass('footerdown');
    }
    }
    mypos = mywindow.scrollTop();
    }
    }, 300);
    });
    });
    </scriptDELETEME>
    <styleDELETEME>
    /* CSS for footer styling*/
    /* Includes fix to pin footer to viewport bottom on short pages */

    body {
    min-height: 100vh;
    position: relative;
    padding-bottom: 110px; /* Your footer height */
    }

    #your-css-id-here {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    width: 100%;
    transition: transform 0.5s ease;
    }

    .footerdown {
    transform: translateY(110px);
    }
    </styleDELETEME>

    NOTE: The site wouldn't let me post my comment with the script or style tags, so you need to delete the "DELETEME" from the tags before using.

  22. Hi, thank you for this tutorial, it works well. Is it possible to amend the code in a way that while scrolling up the header appears only when reaching the top of the page, not right away?
    Thank you!

    1. Hey Susa!

      In that case, why make the header sticky at all? Just have a normal header that's not sticky, sitting at the top of the page... I think that should do what you want here...

      Cheers!

Leave a Reply

Element.How Newsletter

Sign up for our newsletter to get Elementor related updates and tutorials

Close