Header disappearing and the coming back when scrolling

Hi studiono,

Can you try adding this code in your child theme’s functions.php:

function hide_show_header(){
?>
<script>
jQuery( document ).ready(function( $ ) {
  var didScroll;
  var lastScrollTop = 0;
  var delta = 5;
  var navbarHeight = $('#header').outerHeight();

  $(window).scroll(function(event){
    didScroll = true;
  });

  setInterval(function() {
    if (didScroll) {
      hasScrolled();
      didScroll = false;
    }
  }, 250);

  function hasScrolled() {
    var st = $(this).scrollTop();
    
    if(Math.abs(lastScrollTop - st) <= delta)
      return;
    
    if (st > lastScrollTop && st > navbarHeight){
      $('#header').fadeOut("fast");
    } else {
      if(st + $(window).height() < $(document).height()) {
        $('#header').fadeIn("fast");
      }
    }
    
    lastScrollTop = st;
  }
});
</script>
<?php
}
add_action('wp_footer', 'hide_show_header', 100);

Best regards,
Nikko

Hi studiono,

I tried to use hide instead of fadeout but would still see the shrinking part.
It will most likely need to modify some core js file do it, since just adjusting the timings doesn’t seem to work (atleast when I tried).
The workaround I can suggest is disable the shrinking header, so you’ll just have the regular showing header and hidden header on scroll down.

Best regards,
Nikko

Hi studiono,

We’re overjoyed to hear that and we’re glad that we could help :D
I’ll just give credit to where I got the code from https://stackoverflow.com/questions/37505795/hide-header-when-scroll-down-and-show-when-down/#answer-37507343 I just modified it to work on Enfold.
Thanks for using Enfold and have a great day and weekend!

Best regards,
Nikko