shoeb shoeb - 7 months ago 21
HTML Question

fadeIn fadeOut flashing upon scroll up and down

I want to achieve smooth fadeIn and fadeOut when scrolling down and up. However, it is flashing too much. This is my JSFIDDLE

$(this).scroll(function () {

var y = $(this).scrollTop();
if (y > 70)
{
$('.header-content-wrapper').fadeIn().removeClass('selected3').addClass("selected");
}
else if (y < 70) {

$('.header-content-wrapper').fadeOut().addClass('selected3').removeClass("selected");

}

});

Answer

First things first, you do not have a "selected3" class declaration on your css. Secondly, the fadeout is flashing because your "header-content-wrapper" class has a "display : block !important" remove that and should be ok. if you want block display, you don't have to set it, it is the default value.


EDIT:

JS (removed fade in/out functions)

var faded = true
$(this).scroll(function() {
  var y = $(this).scrollTop();

  if (y > 70 && faded) {
    faded = !faded
    $('.header-content-wrapper').animate({
      opacity: 0
    }, 500, function() {
      $('.header-content-wrapper').removeClass('selected3').addClass("selected");
      $('.header-content-wrapper').animate({
        opacity: 1
      });
    });
  } else if (y < 70 && !faded) {
    faded = !faded
    $('.header-content-wrapper').animate({
      opacity: 0
    }, 500, function() {
      $('.header-content-wrapper').addClass('selected3').removeClass("selected");
      $('.header-content-wrapper').animate({
        opacity: 1
      });
    });

  }
});