Как пошагово добавлять / удалять несколько классов в div при прокрутке?

Question

Я пытаюсь заставить логотип исчезать, а уменьшенная версия исчезает при прокрутке. В настоящее время он отлично работает с точки зрения масштабирования при прокрутке ( см. JS Fiddle здесь ), но теперь мне нужно, чтобы оно исчезло поверх этого, и я не знаю, где я иду не так ( см. JSFiddle здесь ), в настоящее время это не гладко. Кто-нибудь может указать мне правильное направление?

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

Answer 1

Параметр 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, 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>
</div>