Использование 2 $ (Window) .scroll скриптов

Question

Использование 2 $ (Window) .scroll скриптов

0

Я использую 2 скрипта, которые зависят от функции $ (window).scroll. Один из них - imagescroll.js для изображений с параллаксом, а один - inview.js для анимации css3, в то время как элемент находится в видовом экране. Оба сценария выглядят следующим образом

Inview.js

$(function() {
      var $blocks = $('.animBlock.notViewed');
      var $window = $(document);

  $window.on('scroll', function(e){
    $blocks.each(function(i,elem){
      if($(this).hasClass('viewed')) 
        return;

      isScrolledIntoView($(this));
    });
  });
});

function isScrolledIntoView(elem) {
  var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();
  var elemOffset = 0;

  if(elem.data('offset') != undefined) {
    elemOffset = elem.data('offset');
  }
  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();

  if(elemOffset != 0) { // custom offset is updated based on scrolling direction
    if(docViewTop - elemTop >= 0) {
      // scrolling up from bottom
      elemTop = $(elem).offset().top + elemOffset;
    } else {
      // scrolling down from top
      elemBottom = elemTop + $(elem).height() - elemOffset
    }
  }

  if((elemBottom <= docViewBottom) && (elemTop >= docViewTop)) {
    // once an element is visible exchange the classes
    $(elem).removeClass('notViewed').addClass('viewed');

    var animElemsLeft = $('.animBlock.notViewed').length;
    if(animElemsLeft == 0){
      // with no animated elements left debind the scroll event
      $(window).off('scroll');
    }
  }
}

Сценарий параллакса из следующей ссылки

http://www.jqueryscript.net/demo/Simple-Spotify-Like-jQuery-Image-Parallax-Effect-Plugin-Parallax-ImageScroll/demo/

Теперь проблема заключается в том, что, поскольку оба этих сценария используют $ (window).scroll, параллакс перестает работать, и вместо изображения появляется пробел. Вы можете увидеть рабочий HTML по следующей ссылке

http://bit.ly/1gUmHwj

Пожалуйста, дайте мне знать, как я могу это преодолеть.

Заранее спасибо!

Pratik Ghela 17 фев. 2014, в 14:13

Источник

1

Не могли бы вы повторить эту проблему на JSFiddle? Мне не особенно нравится нажимать на некоторые случайные сокращенные URL-адреса ...
James Donnelly 17 фев. 2014, в 12:40
0

Где твой код параллакса? Это может быть из-за $(window).off('scroll');
putvande 17 фев. 2014, в 12:41
0

@JamesDonnelly: _ Я сократил URL, потому что я не могу отобразить URL здесь из-за условий NDA. Я не знаю, как повторить то же самое на jsfiddle.
Pratik Ghela 17 фев. 2014, в 12:53

Показать ещё 1 комментарий

Теги:

jquery

html

parallax

1 ответ

Ещё вопросы

Не могли бы вы повторить эту проблему на JSFiddle? Мне не особенно нравится нажимать на некоторые случайные сокращенные URL-адреса ...
Где твой код параллакса? Это может быть из-за $(window).off('scroll');
@JamesDonnelly: _ Я сократил URL, потому что я не могу отобразить URL здесь из-за условий NDA. Я не знаю, как повторить то же самое на jsfiddle.

Goran.it · Answer 1 · 2014-02-17T10-22-00.000Z

Используйте пространства имен jQuery в обоих сценариях:

$window.on('scroll.imagescroll', function(e){
 // CODE
$(window).off('scroll.imagescroll');
 // CODE

Хорошо. Я попробую это. Итак, вы хотите сказать, что вместо $ (window.scroll) я должен использовать $ (window.on ('scroll.imagescroll')?
Нет .. $ (окно) является ссылкой на объект окна, в то время как $ (окно) .on ('scroll.imagescroll') означает, что вы даете этому конкретному событию "имя", и его можно отключить, вызвав его то же самое "имя". Имейте в виду, что $ (window) .off ('scroll') отключит все события прокрутки (все пространства имен).