Question

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

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

这是我下面的代码，您可以前进一些，但是尝试后退会带来一个问题，因为新的当前部分将加载在前一个部分的后面，而前一个部分仍然可见。

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

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

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

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

1 个答案: