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

我正在使用scrollify换出固定位置的组件，并添加/删除类来为过渡设置动画。当您向前滚动时，我可以按照需要进行所有工作，但是当您向上滚动以查看上一节时，它不会删除上一课，因此上一节现在会在其后进行动画处理。

我认为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');
        },
    });
});

最佳答案

问题是取决于您实际上是否会按照“上一个”或下一个“上一个”或“下一个”滚动，因此您错误地隐藏了类。

如果您使用scrollify不能选择检测滚动方向，则可以创建一个超级快速变量来检测您是向上还是向下滚动。然后只需更新您的类，然后在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;
        },

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

这是一个有效的小提琴：https://jsfiddle.net/k1e6x79f/