BEM-Scrollspy

Блок для отслеживания скролла страницы. Предназначен для проектов, использующих БЭМ методологию.

Зависимости

bem-core

• блок i-bem
• блок next-thick
• блок functions
• блок jquery

Установка

1. Достаточно прописать библиотеку как зависимость в вашем bower.json и выполнить bower-npm-install для установки из GitHub репозитория или Bower регистра, npm зависимости установятся автоматически.

2. Добавьте уровень переопределения из в файл make.js:

[ 'libs/bem-scrollspy/common.blocks' ]

Использование

Все что делает блок scrollspy - генерирует 2 БЭМ события:

• scrollin - когда блок становится виден пользователю
• scrollout - когда блок скрыватся из виду.

Подписавшись на эти события, можно выполнять различные действия. Например, запускать и останавливать анимацию:

    var ss = this.findBlockOn('scrollspy');
    ss.on('scrollin', this.setMod('animation', 'progress'), this);                  
    ss.on('scrollout', this.setMod('animation', 'stop'), this);   

В объекте события передается направление скролла. Например:

    var ss = this.findBlockOn('scrollspy');
    ss.on('scrollin', this._onScrollIn, this); //подписка на событие
    
    /*.....*/
    
    _onScrollIn: function(e, dir){ //получаем направление скролла вторым параметром
      if (dir === "down") {
        doAction();
      }else if (dir === "up") {
        doAnotherAction();
      }
    },

Параметры

Можно задать отступ для блока в пикселях или процентах (по умолчанию 10% от края окна). Можно задать отступ сразу в js параметрах блока:

  {
    block: 'scrollspy',
    js: {offset: '40'}
  }

или использовать метод setOffset():

    var ss = this.findBlockInside('scrollspy');
    ss.setOffset(0); //подписка на событие

Этот метод установит новый размер отступа и пересчитает позицию блока. Если вам нужно только пересчитать позицию блока, не меняя значений, можно использовать метод calcOffsets()

Методы блока

Метод	Описание
setOffset(val)	устанавливает отступ в процентах или пикселях.
calcOffsets()	запускает расчет позиции блока
activate()	ручная активация блока (вызовет событие scrollin)
deactivate()	"ручнной" scrollout
getDir()	возвращает направление последнего скролла
isActive()	проверяет, находится ли блок в зоне просмотра