fadeIn fadeOut мигает при прокрутке вверх и вниз

Question

Я хочу добиться плавного fadeIn и fadeOut при прокрутке вниз и вверх. Однако он слишком сильно мигает. Это мой 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 1

Первые вещи первых, вы не имеете «selected3» объявление класса на вашем CSS. Во-вторых, затухание вспыхивает, потому что у вашего класса «header-content-wrapper» есть «display: block! Important», который удаляется и должен быть в порядке. если вы хотите отобразить блок, вам не нужно его устанавливать, это значение по умолчанию.

---

EDIT:

JS (удален выцветанию в/из функций)

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 
     }); 
    }); 

    } 
});