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”类声明。其次，淡出是闪烁的，因为你的“header-content-wrapper”类有一个“display：block！important”删除它，应该没问题。如果你想要块显示，你不必设置它，它是默认值。

编辑：

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

  }
});

fadeIn fadeOut在向上和向下滚动时闪烁

1 个答案: