javascript - 使用 Scrollify 获取上次查看的索引

Question

我使用滚动来交换固定位置组件，并添加/删除类来为过渡设置动画。当您向前滚动时，我的一切都按我希望的方式工作，但是当您向上滚动查看上一节时，它不会删除上一个类，并且上一节现在在其后面进行动画处理。

我认为 prev 方法不会有用，因为它不会调用您所在的上一节，而只会调用假设您始终前进的上一节。

下面是我的代码，您可以向前移动，但是尝试向后移动会出现问题，因为新的当前部分将加载到前一个部分之后，而前一个部分仍然可见。

jsfilddle here

var wrapper = $('.wrapper');
var currentPosition = 0;

$(wrapper).each(function(index) {
    if (currentPosition != index) {
        $(this).css('opacity', 0);
    } else if (currentPosition == index) {
        $(this).css('opacity', 1);
    }
});


$(function() {
    $.scrollify({
        section: ".wrapper",
        scrollSpeed: 700,
        setHeights: false,
        after: function(index, sections) {
            var prevWrapper = $.scrollify.current().prev();
            var currentWrapper = $.scrollify.current();
            var nextWrapper = $.scrollify.current().next();

            $(prevWrapper).removeClass('wrapper-enter').addClass('wrapper-leave');
            $(currentWrapper).removeClass('wrapper-leave').addClass('wrapper-enter');
        },
    });
});

Answer 1

问题在于向上或向下滚动，您的“下一个”或“上一个”可能实际上并不是您所想的那样，因此您错误地隐藏了类。

由于scrollify没有检测滚动方向的选项，您可以做的是创建一个 super 快速变量来检测您是向上还是向下滚动。然后只需在 after 函数中更新您的类即可。

$.scrollify({
        section: ".wrapper",
        scrollSpeed: 700,
    setHeights: false,
        after: function(index, sections) {
    var prevWrapper = $.scrollify.current().prev();
            var currentWrapper = $.scrollify.current();
            var nextWrapper = $.scrollify.current().next();
            let elem = null;

      // Add wrapper-enter to current element. 
      $(currentWrapper).removeClass('wrapper-leave').addClass('wrapper-enter');
            if(lastIndex < index) {
          // Scolled down if lastIndex < index
          elem = prevWrapper;
        } else {
          // Scrolled up if last index > index
          elem = nextWrapper;
      }
      $(elem).removeClass('wrapper-enter').addClass('wrapper-leave'); 
      lastIndex = index;
        },

在上面我只是创建了一个变量来跟踪最后一个索引。

这是一个工作 fiddle :https://jsfiddle.net/k1e6x79f/