< Elementor Codes >

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 Sticky Header Changes Logo Size and Position


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

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>

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 > 40) {
if (mywindow.scrollTop() > mypos) {
$('#stickyheaders').addClass('headerup');
} else {
$('#stickyheaders').removeClass('headerup');
}
}
mypos = mywindow.scrollTop();
}
}, 300);
});
});

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

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!

119 Responses

  1. Hey there,

    First off thank you so much for putting this up!

    When I have applied this, the transition is very snappy, would you be able to advise on how to make the transition a bit smoother.

    Thanks so much

    1. Hey Carlos!

      Simply increase the values in this part of the code!

      #stickyheaders{
      -webkit-transition: transform 0.34s ease;
      transition : transform 0.34s ease;
      }

    2. If for some reason it remains snappy, you might need to add !important . Like this :

      #stickyheaders{
      -webkit-transition: transform 0.34s ease !important;
      transition : transform 0.34s ease !important;
      }

  2. Is there an easy way to adjust this code to get a footer element to only show when a user scrolls up?

    If I add an ID of stickyfooter, and change this - translateY(-110px) ? But what translateY would I need to add to make it disappear below the screen? 110px instead of -110px?

    1. Never mind, I tried it and it worked!

      I changed all sticyheaders to stickyfooter, headerup to footerup (both of these more for it to make more sense in case my client hires someone else to change things later) and made the translateY(110px).

      If there is any way to make the button not visible when the screen first loads (at the moment it is there on page load, then when you scroll down disappears, then on scroll up appears again), that would be awesome!

    2. Sorry, one more thing. When the user gets to the bottom of the page, the button is now showing in a different location to before. Is there a way to say when it hits the full bottom, to relocate the button to its proper place?

    3. Beth Gillies Hey ! Try changing the line

      if (mypos > 40) {

      to

      if (mypos > 40 || $(document).height() < mypos + 300) { and change that '300' value to the approximate px distance that your button should normally be at from the bottom of the page.

  3. Great codes on here, but when I try this one i can't get it to work. I use the html elementor widget. Is there something I miss?

  4. Is there a way to set this to hide menu after a specific range they have scrolled? Eg: hide if they scroll more than 40px, 5%, 10em, etc?

    1. Yes, and this is already in the code!

      if (mypos > 40) {

      the '40' value here is PX. so you can adjust it to what you want!

  5. Thanks again for code! Very helpful! Quick question. Is it possible to only display the sticky header once the user has scrolled back to the top of the page vs once they begin scrolling back up? I'm trying to keep the header transparent (I know! ;-). and as I scroll back up the header is covering text...

  6. Thank you very much for the code. It works very nice!

    I am curious that is it possible to make it responsive? I tried to hide the html element on specific page (tried to keep the header on mobile) but the scolling effect is still there.

    Anyway, I love the effect so much. Appreciate!

    1. Use this code instead. It will make the design work only for mobile. If you want the oppositve, change the < to > where it says ' if ($(window).width() < 767){ ' .

      <script>

      document.addEventListener('DOMContentLoaded', function() {
      jQuery(function($){
      if ($(window).width() < 767){
      var mywindow = $(window);
      var mypos = mywindow.scrollTop();
      mywindow.scroll(function() {
      if (mypos > 40) {
      if(mywindow.scrollTop() > mypos) {
      $('#stickyheaders').addClass('headerup');
      } else {
      $('#stickyheaders').removeClass('headerup');
      }
      }
      mypos = mywindow.scrollTop();
      });
      }
      }); });

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

      1. I am using your code with my transparent header but when i tried to add a white background color to the header when it's up.. but i can't make it work

        I'm not sure what is wrong here

        document.addEventListener('DOMContentLoaded', function() {
        jQuery(function($){
        if ($(window).width() 40) {
        if(mywindow.scrollTop() > mypos) {
        $('#stickyheadersm').addClass('headerup');
        } else {
        $('#stickyheadersm').removeClass('headerup');
        }
        }
        mypos = mywindow.scrollTop();
        });
        }
        }); });

        #stickyheadersm{
        -webkit-transition: transform 0.34s ease;
        transition : transform 0.34s ease;
        }
        .headerup{
        transform: translateY(-70px),
        background-color: rgba(255, 255, 255, 1),
        opacity: 1;
        /*adjust this value to the height of your header*/
        }

    2. Maxime Desrosiers Thanks for this code ! I was looking for how to do this 🙂

      In the meantime I had found this workaround :

      <script>
      document.addEventListener('DOMContentLoaded', function() {
      jQuery(function($){
      var mywindow = $(window);
      var mypos = mywindow.scrollTop();
      mywindow.scroll(function() {
      if (mypos > 40) {
      if(mywindow.scrollTop() > mypos) {
      $('#stickyheaders').addClass('headerup');
      } else {
      $('#stickyheaders').removeClass('headerup');
      }
      }
      mypos = mywindow.scrollTop();
      }); }); });
      </script>
      <style>
      @media all and (max-width:767px) {
      #stickyheaders{
      -webkit-transition: transform 0.34s ease;
      transition : transform 0.34s ease;
      }
      .headerup{
      transform: translateY(-110px);
      }
      }
      </style>

  7. Hi, thank you for putting this up:)

    Is there a way to disregard the "sticky on scroll down - show on scroll up effect" and just make the sticky row disappear after a certain amount of pixels? It probably requires a different code snippet, but I searched everywhere and can't find a solution.

    Thank you for doing good work!

    1. Hey Damir! Here... adjust the '340' value to where you want the header to go up.

      <script>
      document.addEventListener('DOMContentLoaded', function() {
      jQuery(function($){
      var mywindow = $(window);
      var mypos = mywindow.scrollTop();
      mywindow.scroll(function() {
      if (mypos > 340) {
      $('#stickyheaders').addClass('headerup');
      } else {
      $('#stickyheaders').removeClass('headerup');
      }
      mypos = mywindow.scrollTop();
      });
      }); });

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

  8. Hi there, thanks for this! I've implemented it on a few sites already and it's so smooth.

    I was wondering though; could this code be modified to show a hidden header when user scrolls down X pixels? Top of page would have a non-sticky header, and after it's out of view, this targeted sticky header slides into view?

    The described kind of header was an option on a theme (the7) I used to use before switching to Elementor Pro, and I really liked it when I had a transparent header, and after scrolling the colors changed on logo, navigation and background.

    Thanks!

  9. Hi, thanks for sharing your code.

    Could you please give me some advice on how to add a code that hides the menu when jumping to a section? . Also, could you give me some advice on how to add a code that shows the menu when you reach the top of the page, or when you hover the mouse at the top of the page?

    Thank you!!

  10. I made a slight alteration to the code to allow it to work on height-varying headers (such as if the menu is shorter on mobile devices) without requiring any additional setup:

    <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
    jQuery(function($){
    var mywindow = $(window);
    var mypos = mywindow.scrollTop();
    mywindow.scroll(function() {
    if (mypos > 40) {
    if(mywindow.scrollTop() > mypos) {
    let headerHeight = $('#stickyheaders').outerHeight();
    $('#stickyheaders').css('transform','translateY(-'+headerHeight+'px)');
    } else {
    $('#stickyheaders').css('transform','translateY(0px)');
    }
    }
    mypos = mywindow.scrollTop();
    }); }); });

    </script>
    <style>
    #stickyheaders {
    -webkit-transition: transform 0.34s ease;
    transition : transform 0.34s ease;
    }
    </style>

    It works great so far! Probably has a few minor problems with changing resolutions (i.e. window sizes) while scrolling, but it should fix itself on subsequent scrolls.

    Thanks!

  11. Ciao complimenti per il codice. It works very nice!

    I ask you, if it is possible, when I scroll the menu it disappears to the left instead of up

    1. Hey Omar! Yes this is possible... change this

      transform: translateY(-110px); /*adjust this value to the height of your header*/

      to

      transform: translateX(-110vw);

  12. Hi there, thanks for this awesome stuff! I am looking to achieve similar results except that I need the header to hide when you scroll down from the top and only show back again when you scroll back to the top. Is that possible with this snippet?

    1. I don't understand... isn't that the default behaviour for a standard header, that is not sticky? Why make it sticky if you only want to show it at the top ?

    1. Security... because you are adding JS. You probably have WordFence or some other security plugin, place it in learning mode!

    1. It should be working on mobile as well, if you are using the same header there! If not, you will need to duplicate the code, and give your mobile header a unique id!

  13. Hi there, am trying to apply this with my header template. What do you mean with "place the html element somewhere in the header template". How do I place an html element? Thanx in advance

    1. The Html element is an Elementor element, just like the image, heading, text, accordion, etc elements... you will find it on the left!

  14. Thanks so much for this 🙂
    Id like to ask if it possible to change the timing when the header shows again when scrolling up, I mean, the header appearing just on the second scroll up or a specific length. Thanks

    1. This is possible, however it would need to be coded in. And I don't think most people will want that, so I won't be adding this feature to the tutorial... Also I don't think it would be good UX.

  15. Thanks so much, worked like a breeze for me on desktop, just copied your code as it is. Though not tested on mobile & tablet. Will come back here again for that 🙂

  16. Hello I have a question, I apply every thing and it work in the testing but when I try to apply it to the website it doesn't let me and a message appears "ERROR 403". What can I do ??... thanks

  17. Hey there,

    Have another question, in addition to the show and hide code or configuration how can I add the option that once you pass the mouse pointer in the area of the menu it appears again and ones you get the pointer from there it hides, but the show and hide scroll option keep working.

    1. Use this code instead:

      <script>

      document.addEventListener('DOMContentLoaded', function() {
      jQuery(function($){
      var mywindow = $(window);
      var mypos = mywindow.scrollTop();
      mywindow.scroll(function() {
      if (mypos > 40) {
      if(mywindow.scrollTop() > mypos) {
      $('#stickyheaders').addClass('headerup');
      } else {
      $('#stickyheaders').removeClass('headerup');
      }
      }
      mypos = mywindow.scrollTop();
      }); }); });

      </script>
      <style>
      #stickyheaders{
      -webkit-transition: opacity 0.34s ease;
      transition : opacity 0.34s ease;
      }
      .headerup{
      opacity:0;
      }
      .headerup:hover{
      opacity: 1;
      }
      </style>

  18. Hello! it works great. thank you very much!

    Just wanted to ask what part do I need to adjust to make it wait a sec to show header again when scrolling back to the top?

      1. Maxime Desrosiers Hallo 🙂 is it possible to make it opposite? Show Sticky Header on Scroll Down and Hide on Scroll Up? Thank u so much!

      2. Wicky Triky Yes, change

        if(mywindow.scrollTop() > mypos) {

        to

        if(mywindow.scrollTop() < mypos) {

    1. This is my code

      /* Hello, I create sticky footer from your code. But how to remove blank space when I scroll has finish.

      (Sorry for my bad english)

      This is the website : https://ajegbali.my.id/2015/04/bahasa-korea-kangen-atau-aku-rindu-kamu.html

      This is my code

      document.addEventListener('DOMContentLoaded', function() {
      jQuery(function($){
      var mywindow = $(window);
      var mypos = mywindow.scrollTop();
      mywindow.scroll(function() {
      if (mypos > 40 || $(document).height() mypos) {
      $('#stickybootom').addClass('footads');
      } else {
      $('#stickybootom').removeClass('footads');
      }
      }
      mypos = mywindow.scrollTop();
      }); }); });

      #stickybootom{
      -webkit-transition: transform 0.34s ease;
      transition : transform 0.34s ease;
      }
      .footads{
      transform: translateY(100%); /*adjust this value to the height of your header*/
      }

      */

  19. @Maxime, awesome job, thank you!

    @Everyone else: when you break your head off trying to understand why Chrome on iOS is the only browser now showing transition — restart the freaking browser

  20. Id like to ask if it possible to change the timing when the header shows again when scrolling up, like a delay with 5 px? Thanks

    1. Yes this is possible, however it increases the complexity of the code by a good bit, and for most users the code provided works well enough.

  21. Thanks for this code! I do have one problem though. I have a one-page-design and if i click on a link in my menu it scrolls to the appropriate section, but it leaves a blank space with the height of my header above it. If my header wouldn't hide on scrolling down, that would be correct, but elementor doesn't seem to know that my header gets hidden. Anyone knows a way to fix this?

    1. I suggest you ignore this... just a bit of extra white space, which is pretty much always welcome. If you really want to get rid of this, it's not as simple as you think.

      Let's say, for example, someone goes to the bottom of the page first, then clicks a link. It will auto scroll UP to that link, so the header will show. If you removed the offset, then it would not show properly... So you would need a solution that considers where the user is on the page, and if he goes up or down, then adjust exactly where he lands... a well written JS snippet will be required for this.

      1. Yeah thats too difficult for me to do. I will ignore it than. Thanks you!

  22. It was a very practical training.
    But I want this change to be made when the user stops (not scrolling) on the page? (that's mean both of scroll up + not scroll)
    ----------
    Thank you

  23. Hi,

    Thanks for this tutorial. I am wondering if the code can be tweaked so that the original state of the header is transparent --> when scrolling down it is hidden --> When scrolling up it is sticky with solid background color.

    I found some other tutorials doing this, but they all have the issue that the header disappears on mobile when scrolling all the way back to the top. I can see this is not happening with your code, but I need to somehow add that the header is transparent to begin with.

  24. Hi guys!

    I have the same HTML and CSS coding that works for my header. But I would like to only appear when start scrolling and not when loading. I have another header that is transparent when loading so I fit into the image background and I would like my secondary header to only show when scrolling down and hide when scrolling up. I believe that the coding is the same as what is in this post but I would need that extra coding to hide it when loading.

    Thanks

    1. Found it! The specific element needs to be sticky.
      Especially when you don't want a complete section to be sticky, but just one element.

  25. I found a problem - Additional Custom Breakpoints - when I start to use it, then jetsticky dosen't work on normal screen, I have to minimalize site

      1. Exactly what I did.

        Do I need to add the HTML widget in one of the header's columns?

  26. I think I"ve tried it all
    I've placed it inside the column of the header section.
    And also tried it in a different section directly below the header section and it still won't work.

    Thanks for your time.

  27. So sorry it was an error on my end🙏😞.
    I gave the header CSS Classes instead of a CSS ID of "Stickyheaders"

    It"s fine now, thanks!

  28. Hello, I have multiple header in one page. When I try to add same CSS ID to more then one header it fails. Just one header hides it self. Is there any way to use it in more then one Elementor object.

  29. Thanks for this! I'm having an issue where the header does not fully hide. a sliver of the bottom still shows when I scroll. know any fixes to this? thank you!

    1. Hey Paul!

      In the code, you will find this:

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

      Just adjust the px value there!

  30. Hello

    Great tutorial! and thanks for putting out such good content, I appreciate it a lot!

    I only got a small problem. So my header has a height of 13.3 VH and when scrolling down there is still some header visible. This is the website https://beyondweb.ch/ and the code I'm using:

    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 > 40) {
    if (mywindow.scrollTop() > mypos) {
    $('#stickyheaders').addClass('headerup');
    } else {
    $('#stickyheaders').removeClass('headerup');
    }
    }
    mypos = mywindow.scrollTop();
    }
    }, 300);
    });
    });

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

    1. Hey Kim!

      To fix this, just add a bit of height here:

      .headerup{
      transform: translateY(-13.3vh); /*adjust this value to the height of your header*/
      }

      Maybe like this:

      .headerup{
      transform: translateY(-16vh); /*adjust this value to the height of your header*/
      }

  31. Thank you for your amazing tutorial!

    I only have one problem it's when I click an object with an anchor it scrolls to it but leaves the spacing of the header... How can I fix that?

  32. Hi, thank you very much for the great code! One quick question though: How do we find the mypos and the height of the header in px? My menu header is the second section from the top and Ive tried an number of numbers but cant seem to target it correctly. I also tried inspecting the element but I can't seem to find it. Any help would be greatly apprceiated!

    1. the "mypos" only needs to be changed if your header isn't the first thing on the page... and the value doesn't need to be precise. It represents the value, from the top of the page, after which the header will hide on scroll down, and show on scroll up.

      The height of the header in px also just needs to be approximate. If on scroll down, you can't see any part of your header, then you got it right. If you can still see a bit of it, increase the value.

  33. hi! this worked great, thank you very much!
    however, I'm left with a strip about 5px high of the header's background. this only appears on desktop, tablet and mobile view display smoothly.
    any idea why that could happen?

  34. Thanks for your tutorial. Just only, when I use it in mobiles, when you click on the hamburguer, appears the menu but hides in the same moment without woing anything. You have to click on the hamburguer a second time and it works.

    Can you tell me a solution, please?

    Thanks

    1. My code in this tutorial doesn't have anything to do with the hamburger misbehaving (or not). It's just the entire header section that is added, or removed, a transform:translateY() css declaration, and this is very unlikely to result in the behaviour you mention.

  35. Hi Maxime. Thanks for this code. I hope I explain this clear enough. I have a sticky footer section below my main footer that is similar to an inner section above my sticky header. When I scroll up, the top inner section disappears and the sticky header inner section with the menu stays on top as I scroll down. What I would like to have happen is for the sticky footer inner section below my footer to appear on the bottom of the page after the one on top disappears from scrolling down. I have tried reverse engineering your code but I appear to be missing something. The site is https://ryplio.elementor.cloud/. The site isn't published yet, so please reply to this and when I get your email, I will send you the 4-digit access code. Thanks for your help in advance.

    1. Hey Ted!

      Sorry that's getting very specific... If you would like paid help for this, please reach out to me via my email in the footer. Cheers mate

  36. Hey Maxime, this is great! Although i´m using this for a mobile header and it's not working correctly. On the left I have the brand logo and on the right the menu icon. When making the header sticky, the menu icon disappears. Any thought on what I might be doing wrong?

  37. Hi Great tutorial thank, Is there any way to do that in a opposite way? I mean, when I'm scroling down header is not visible when I'm scrolling up header shows up?

Leave a Reply