如何错开滚动向div添加/删除多个类？

2024-04-29 • 问答

我正在尝试使徽标淡出，而较小的版本在滚动时淡入。就滚动缩放（see JS Fiddle here）而言，它目前工作得很好，但现在我需要它在此之上淡出，而且我不知道我要去哪里错了（see JSFiddle here），目前不光滑。谁能指出我正确的方向？

JS：

function scrollAnimation() {
  if ($(window).width() > 640){
    var scrollTop = $(window).scrollTop();

    if (scrollTop > 50) {
      $(".inner").addClass('scrolling');
      setTimeout(function() {
        $(".inner").removeclass('hide-logo').addClass('show-logo');
      },500);
    }
    else {
      $(".inner").addClass('hide-logo').removeclass('show-logo scrolling');
    };
  } else {
    $(".inner").removeclass('show-logo scrolling');
    $(".inner").addClass('hide-logo');
  }
}

$(window).on('scroll resize',function () {
  scrollAnimation();
});

CSS参数transition-delay提供了一种过渡开始时交错的方法。这意味着，当您先向下滚动然后一段时间后再执行辅助操作时，便可以触发过渡。

如果您不能简单地延迟开始，而需要在做某件事之前先听完转换的结束，那么您可以将transitionend事件绑定到处理程序。

// store the logo state
var logoFullSize = true;

// add listener to trigger fade-in once fade-out has finished
$(".site-header").bind('transitionend',function() {
  $(this).removeClass('fade-out')
});


function scrollAnimation() {
  // removed this logic so demo works in stackoverflow
  // if ($(window).width() > 640) {

    var scrollTop = $(window).scrollTop();

    if (scrollTop > 50 && logoFullSize) { // change to small logo
      $(".logo").addClass('scrolling');
      $(".site-header").addClass('fade-out');
      logoFullSize = false;
    }

    if (scrollTop < 50 && !logoFullSize) { // change to full-size logo
      $(".logo").removeClass('scrolling');
      $(".site-header").addClass('fade-out');
      logoFullSize = true;
    }
  //}
}

$(window).on('scroll resize',scrollAnimation);

.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: #000;
  opacity: 1;
  transition-property: opacity;
  transition-duration: .2s;
  transition-timing-function: easeInExpo;
}

img.logo {
  display: block;
  margin: 0 auto;
  height: 120px;
  padding: 5%;
  transition-property: height;
  transition-duration: .2s;
  transition-delay: .2s;
}

img.scrolling {
  height: 50px;
}

.site-header.fade-out {
  opacity: 0.6;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="site-header">
  <span class="inner">
  <img class="logo" src="http://upload.wikimedia.org/wikipedia/fr/c/c8/Twitter_Bird.svg" />
  </span>
</div>

<div class="text">
  <p>
    Lorem ipsum dolor sit amet,id pro case commodo docendi,denique periculis vix ad. Eam eu laboramus conceptam reprimique,quis tacimates pericula in eam,cum ei amet commune. Pri porro atomorum ut,at augue graece torquatos vim. Dolore gubergren mea ut,ex sit munere ancillae delicata.
  </p>
  <p>
    Antiopam oportere ea duo. Ut per vidit accusata neglegentur. Te quem utamur eam. Mea vidit illum tacimates ne.
  </p>
  <p>
    Cu summo viderer quaeque per. Utinam electram sed et. Ius no accusamus vulputate,vis dicant delectus deserunt ne. Appareat ponderum delicatissimi vis ut,ut alia mucius sea. Perpetua consulatu temporibus vix ad,error accommodare in sea.
  </p>
  <p>
    Ex est mollis dolores inciderint,eu vix quas assum blandit,vis ad enim nihil nusquam. Cu iusto veniam suavitate duo. Mundi oratio perpetua id ius,cu usu facilisis dissentiet. Saepe debitis detraxit id per,te debitis instructior pro. Id ignota epicuri
    rationibus vis,dicam noster ex ius,ad cum dico mazim persequeris.
  </p>
  <p>
    Duo minim audiam regione at,an qui qualisque prodesset. Ex doming habemus delicatissimi sit,cum ad pertinax molestiae,ea nam agam fabellas. Quaeque aliquid ceteros id vix,vis omnium suavitate explicari ex. Cum an quas meliore.
  </p>
  <p>
    Lorem ipsum dolor sit amet,vis omnium suavitate explicari ex. Cum an quas meliore.
  </p>
</div>

如何错开滚动向div添加/删除多个类？

yaozhiying 回答：如何错开滚动向div添加/删除多个类？

大家都在问