Fading effect on scroll with current script possible?

Question

I am using a very simply script for a sticky header. But when scrolling up i want it to fade. Is that possible with the current script i am using?

$(window).scroll(function () {
    if ( $(this).scrollTop() > 500 && !$('header').hasClass('open') ) {
      $('header').addClass('open');
      $('header').slideDown();
    } else if ( $(this).scrollTop() <= 500 ) {
      $('header').removeClass('open');
      $('header').slideUp();
    }
});

demo jsfiddle

use $('header').fadeOut(); – madalinivascu Apr 14 '15 at 11:21 — madalinivascu, Apr 14 '15 at 11:21

score 0 · Answer 1 · answered Apr 14 '15 at 11:22

0

Use $('header').fadeOut('slow');

https://jsfiddle.net/kyx14te0/1/

answered Apr 14 '15 at 11:22

madalinivascu

32,064
4
39
55

score 0 · Answer 2 · answered Apr 14 '15 at 11:25

0

Use fadeout:

$(window).scroll(function () {
  if ( $(this).scrollTop() > 500 && !$('header').hasClass('open') ) {
    $('header').addClass('open');
    $('header').slideDown();
  } else if ( $(this).scrollTop() <= 500 ) {
   $('header').removeClass('open');
   $('header').fadeOut();
 }
});

answered Apr 14 '15 at 11:25

sk786

394
1
4
21

Thanks for the quick response, but i want to keep the slideUp effect. While slideUp it has to fade at the same time if possible. – M Drenth Apr 14 '15 at 11:43
Just go thriugh this link http://stackoverflow.com/questions/2387515/fadeout-and-slideup-at-the-same-time – sk786 Apr 14 '15 at 12:32

Fading effect on scroll with current script possible?

2 Answers2