Получить последний просмотренный индекс с помощью Scrollify - PullRequest
Новая
       21

Получить последний просмотренный индекс с помощью Scrollify

0 голосов
/ 24 июня 2019

Я использую scrollify, чтобы поменять компоненты с фиксированной позицией, и добавляю / удаляю классы для анимации перехода.У меня все работает так, как я хотел бы, когда вы продвигаетесь вперед по прокрутке, но когда вы прокручиваете вверх, чтобы увидеть предыдущий раздел, он не удаляет предыдущий класс, а предыдущий раздел теперь анимируется позади него.

Я не думаю, что метод prev будет полезен, потому что он не вызывает предыдущий раздел, в котором вы были, а только предыдущий раздел, предполагающий, что вы всегда движетесь вперед.

Вот мой код ниже,Вы можете двигаться вперед просто отлично, но попытка вернуться назад представляет проблему, так как новый текущий раздел будет загружаться позади предыдущего, а предыдущий будет все еще видимым.

jsfilddle здесь 

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

1 Ответ

1 голос
/ 24 июня 2019

Проблема в том, что при прокрутке вверх или вниз ваше «следующее» или «предыдущее» может не совпадать с тем, что вы думаете, поэтому вы неправильно скрываете классы.

То, что вы можете сделать как прокрутка, не имеет возможности определить направление прокрутки, это создать супер быструю переменную, которая будет определять прокрутку вверх или вниз.Затем просто обновите ваши классы, затем в функции после.

$.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/

...