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!

73 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>

    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

Leave a Reply