Gordana Jekic Gordana Jekic - 1 month ago 10
CSS Question

Hide / Show header on scroll effect jQuery

I'm trying to implement this https://www.invisionapp.com/ header on scroll effect but can't make it work.

I tried this

jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() < 200) {
jQuery('header').hide();
} else {
jQuery('header').show();
}
});


but it doesn't work. Header doesn't appear. I found some header animations libraries that do this effect, but I want to implement it by simple jQuery code, don't want to use library.

Can somebody help me please?

Answer

In order for this effect to work your your header (if that's w) must be fixed so

header {
    position: fixed;
}

or you can add it to your jQuery like this

    jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() < 200) {
      $('header').css('position', 'absolute');
    } else {
      $('header').css('position', 'fixed');
      jQuery('header').show();
    }
  });

I hope this helps

Comments