fadeIn fadeOut 上下滚动时闪烁

Question

我想在向下和向上滚动时实现平滑的淡入和淡出。但是，它闪烁太多了。这是我的 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

首先，您的 css 上没有 "selected3" class 声明。其次，淡出正在闪烁，因为你的 "header-content-wrapper" class 有一个 "display : block !important" 删除它并且应该没问题。如果要分块显示，不用设置，默认即可。

编辑：

JS（删除淡入淡出 in/out 函数）

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

  }
});

fadeIn fadeOut 上下滚动时闪烁

fadeIn fadeOut flashing upon scroll up and down

html

jquery

scroll

fadeout

fadein