0

Происходит встряска контента из-за функции скролла, в чем может быть дело? Кто не против, может протестировать сам скролл.

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

   var st = $(this).scrollTop();
   // вниз

   if (st > scrollPos && window_width >= 1024) {

       // если мы в первой секции
       if (st < main_height && !flag) {
           // движемся ко второй секции
           flag = 1;

           $page.animate({
               scrollTop: ($('section.about').offset().top) + 10
           }, 3000, function () {
               if (window_width >= 1200) {
                   $('section.about .video').css({
                       'width': '893px'
                       , 'height': '506px'
                   }).addClass('opened');
                   //player.play();
                   // запускаем видео, как доскролили    
               }
               flag = 0;
               console.log('.');
           });

           // анимация гор, облаков и т д
           $('.clouds-front').css('top', '-295px');
           $('.clouds-back').css('top', '-273px');
           $('.clouds-front2').css('top', '95px');
           $('.clouds-back2').css('top', '73px');
           $('.mountain').css('top', '400px');
           $('.logo').css('top', '500px');
       }
       // вверх 
       // если мы во второй секции, движемся к началу страницы
   }
   else if ((st <= main_height) && !flag && window_width >= 1024) {
       flag = 1;
       $page.animate({
           scrollTop: 0
       }, duration, function () {
           flag = 0;
       });
       // анимация гор, облаков и тд
       $('.clouds-front').css('top', '195px');
       $('.clouds-back').css('top', '273px');
       $('.clouds-front2').css('top', '295px');
       $('.clouds-back2').css('top', '373px');
       $('.mountain').css('top', '324px');
       $('.logo').css('top', '135px');
   }
   scrollPos = st;
});
2
  • Выводите в консоль все переменные, смотрите что происходит. Попробуйте останавливать анимацию перед стартом - $page.stop(true, true).animate(...). И вынесите в самое начало if (!flag && window_width >= 1024) return; - неудобно читать и лишние действия. 4 мая 2018 в 4:24
  • Присвой всем элементам *{transition:all ease .5s;} - допустим, если исчезнет проблема, значит дело в том, что не всем элементам задана анимация. И второй вариант. В условиях if (window_width >= 1200) { пропущены промежуточные варианты
    – Air
    4 мая 2018 в 5:36

1 ответ 1

0

Дело в анимации перехода-движения ко второй секции. Когда анимация прокрутки запущена события скролла окна заставляют трястись так контент. Необходимо запретить скролл во время этой анимации-перехода. Т.е. как только запустили анимацию скролл окна пользователем должен быть недоступен пока анимация перехода не завершится.

Как временно отключить скролл вы можете узнать в ответе на вопрос https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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