0

Вот скрипт который работает следующим образом : есть 7 блоков , между ними разстояние 100 px и они все находятся в блоке "timeline".В этом блоке если легонько прокрутить колесико мышки оно автоматически прокрутится к следующему блоку (типа как слайдер).Проблемка следующая: после блока таймлайн идут еще блоки (продолжение страницы одним словом) и прокрутка должна становится обычной. В коде прописано что если num > 7 num = 7.В общем нужно чтобы если num > 7 функция останавливалась и пользователь крутит дальше вниз страницы НО ЕСЛИ ОН НАЧНЕТ КРУТИТЬ ВВЕРХ ПРОКРУТКА В ТАЙМЛАЙНЕ ОПЯТЬ ДОЛЖНА РАБОТАТЬ КАК ИЗНАЧАЛЬНО

var num = 1;
var scrolling = false;

$(".timeline").bind('mousewheel DOMMouseScroll', function(event) {
  scroll(event);
});


function scroll(event) {
  event.preventDefault();
  if (!scrolling) {
    scrolling = true;
    if (event.originalEvent.wheelDelta < 0 || event.originalEvent.detail > 0) {
      num++;
       num = num > 7 ? 7 : num;  
    } 
    else {
      num--;
      num = num < 1 ? 1 : num;
    }

   $('html, .timeline').animate({
    scrollTop: $(".num" + num).offset().top -100
  }, 
  500, "linear", function() {
    scrolling = false;
  }); 
 }
}

1 ответ 1

0

Селектор <div class="js-animationElement">...</div> В зоне видимости добавляется класс inView и убирается. Вот пример

    var $animationElement = $('.js-animationElement'),
    $window = $(window);

    function inView() {
        var windowHeight = $window.height(),
            delta = windowHeight * 3 / 4,
            windowWidth = $window.width(),
            windowTop = $window.scrollTop(),
            windowBottom = (windowTop + delta);


        $animationElement.each(function() {
            var $element = $(this),
                elementHeight = $element.outerHeight(),
                elementTop = $element.offset().top,
                elementBottom = (elementTop + elementHeight);

            if (elementBottom >= windowTop && elementTop <= windowBottom) {
                $element.addClass('inView');
            }
        });
    }

    $window.on('scroll resize', inView);
    $window.trigger('scroll');  
    }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.