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

Question

我正在使用 scrollify 来换出固定位置的组件，并使用 adding/removing classes 来设置动画过渡。当您向前滚动时，我的一切都按照我想要的方式工作，但是当您向上滚动以查看上一节时，它不会删除上一节 class，并且上一节现在在其后面进行动画处理。

我认为 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

问题取决于向上或向下滚动您的 "next" 或 "prev" 实际上可能不是您所想的那样，因此您隐藏类不正确。

由于 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;
        },

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

这是一个有效的 fiddle：https://jsfiddle.net/k1e6x79f/

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

Get last viewed index with Scrollify

javascript

jquery

jquery-scrollify