Question

我具有固定位置的组件，这些组件通过添加和删除类来进行动画制作。目前，组件正在根据scrollTop偏移量是否大于其height * index进行交换，这对我来说有2个缺点：您必须滚动组件的整个高度才能换出下一个组件，然后特别有力的滚动可能会跳过组件。

我想滚动到一个固定的位置，用户以100px的间隔滚动到一个固定的位置。用户滚动100px之后，我想使滚动动画到第二个组件，即使强制滚动到最后一个组件也是如此。用户滚动200px（或从最后一个位置到100px）后，我想使滚动动画到第三个组件，等等。我知道如何对此进行硬编码，但是我不确定如何通过存储最后一个位置来做到这一点。并检查您是否从那里滚动了100px。

JSFiddle here

var wrapper = $('.wrapper')
var component = $('.component');
var componentLength = $(component).length;
var componentHeight = $(component).outerHeight();

$(component).each(function() {
  $(this).css('opacity', 0);
})

$(wrapper).css('height', componentLength * componentHeight);

$(window).on('scroll', function() {
  var scrollPosition = $(window).scrollTop();
  var lastPosition = scrollPosition;
  var currentOffset = 0;

  $(component).each(function() {
    var indexPosition = $(this).index();

    if (
      scrollPosition >= componentHeight * indexPosition &&
      scrollPosition < (componentHeight * indexPosition) + componentHeight
    ) {
      $(this).removeClass('component-leave').addClass('component-enter');

    } else {
      if ($(this).hasClass('component-enter')) {
        $(this).removeClass('component-enter').addClass('component-leave');
      } else {
        $(this).css('opacity', 0);
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="component red">
    content
  </div>
  <div class="component blue">
    content
  </div>
  <div class="component green">
    content
  </div>
  <div class="component orange">
    content
  </div>
</div>

滚动后对齐到位置

0 个答案: