Использование 2 $(Window).scroll скриптов
Я использую 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');
}
}
}
Скрипт параллакса находится по следующей ссылке
Теперь проблема в том, что оба эти сценария используют $(window).scroll, параллакс перестал работать, и вместо изображения появилось пустое пространство. Вы можете увидеть рабочий HTML по следующей ссылке
Пожалуйста, дай мне знать, как я могу преодолеть это.
Заранее спасибо!
1 ответ
Используйте пространства имен jQuery в обоих сценариях, например:
$window.on('scroll.imagescroll', function(e){
// CODE
$(window).off('scroll.imagescroll');
// CODE