Установка модификатора при скролле страницы

Всем привет. Помогите разобраться. Вешаю модификатор на блок при скролле следующим способом:

modules.define('counter', ['i-bem__dom', 'jquery'], function (provide, BEMDOM, $) {
    provide(BEMDOM.decl(this.name, {
        onSetMod: {
        js: {
            inited: function () {

            this.bindToWin('scroll', function(e) {

            // устанавливаем модификатор

            }); 
                   }
              }
         }
    }))
});

Вопросы:

Как модифицировать и сделать так, чтобы установка модификатора происходила при прокрутке страницы на 500 пикселей, например.
При прокрутке страницы до определенного блока, например, block "b2"

Пробовал так:

var scroll = $(this).scrollTop();

if (scroll >= 500) {
// вешаем модификатор
};

Не получилось

9 years ago

qfox

Надо слушать событие onscroll, например через jquery: http://api.jquery.com/scroll/

Можно другие варианты поискать по словам window onscroll

9 years ago

godfreyd

Так мы же его и так слушаем this.bindToWin('scroll', function(e) У меня есть реакция на скролл, вопрос как правильно посчитать количество пикселей.

9 years ago

qfox

Вот такое работает на форуме (в консольке если вписать):

$(window).scroll(function (e) {
  console.log($(window).scrollTop());
});

Выводит при скролле правильное число.

9 years ago

godfreyd

Да, работает, но если я меняю

 this.bindToWin('scroll', function(e) {

на

$(window).scroll(function (e) {

, то перестает работать переключатель модификаторов

 this.toggleMod('switched', 'on', 'off');

9 years ago

godfreyd

т.е у меня следующая задача, переключать модификатор блока, при скролле, например, на 600 пикселей. Вот так все работает:

this.bindToWin('scroll', function(e) {

      this.toggleMod('switched', 'on', 'off');

});

Но здесь нет подсчета пикселей. А вот так:

$(window).scroll(function (e) { 

var scroll = $(window).scrollTop();

if (scroll >= 640) {
    this.toggleMod('switched', 'on', 'off');
} 


});

считаются пиксели, но не переключаются модификаторы

9 years ago

qfox

Сразу бы так ;-)

this.bindToWin('scroll', function(e) {
  // this = экземпляр блока, поэтому
  // this.toggleMod('switched', 'on', 'off');
  // сработает нормально

  // вот это:
  var _scroll = $(window).scrollTop();
  console.log(_scroll);
  // тоже должно работать, если подключить jquery в modules.define
  // у тебя подключено в первом примере

  // а значит и это
  this.toggleMod('switched', 'on', 'off', _scroll >= 640);
  // тоже, потому что this здесь все еще экземпляр блока 
});

Попробуешь? ;-)

9 years ago

godfreyd

Сейчас попробую. Спасибо.

9 years ago

godfreyd

Отлично. работает. А не подскажете, как к переключению модификатора навешать еще таймер, чтобы переключалось не сразу а через две секунды.

внутри функции setTimeout

setTimeout( function () {

}, 2000);

this уже не будет экземпляром блока?

9 years ago

qfox

Да, не будет. Если у вас ES6, то с ним можно сделать так :-)

setTimeout(() => this.toggleMod(...), 2000);

Пока es6 нет, можно так:

var _this = this;
setTimeout(function () {
  _this.toggleMod(...);
}, 2000);

Или так:

setTimeout(function () {
  this.toggleMod(...);
}.bind(this), 2000);

upd: Попробуйте debugger совсестно с какими-нибудь dev-tools. Очень помогает понять откуда ноги растут ;-)

setTimeout(function () {
  debugger; // и в консольке new Error().stack
  this.toggleMod(...);
}.bind(this), 2000);

9 years ago

godfreyd

Спасибо, большое!!!!!

Чтобы оставлять комментарии, необходимо авторизоваться.