2014-02-17 3 views
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

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

Заранее благодарен!

+1

Не могли бы вы повторить этот вопрос на JSFiddle? Мне особенно не нравится нажимать на какой-то случайный сокращенный URL-адрес ... –

+0

Где ваш код параллакса? Это может быть из-за '$ (window) .off ('scroll');' – putvande

+0

@JamesDonnelly: _ Я сократил URL coz. Я не могу отобразить здесь URL из-за условий NDA. Я не знаю, как копировать то же самое на jsfiddle. –

ответ

0

Использование JQuery пространств имен в обоих сценарий событий, как это:

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

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

+0

Nope .. $ (window) - ссылка на объект окна, а $ (window) .on ('scroll.imagescroll') означает, что вы даете этому конкретному событию «имя», и его можно отключить, вызвав его одним и тем же «именем». Имейте в виду, что $ (window) .off ('scroll') отключит все события прокрутки (все пространства имен) –

Смежные вопросы