Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Сложный скрипт скролла (https://javascript.ru/forum/misc/54061-slozhnyjj-skript-skrolla.html)

hhh 02.03.2015 13:03

Сложный скрипт скролла
 
Всем привет! Зашел значит в тупик в логике скрипта) На примере понятно до того момента как первый section затухает. Далее по логике следующий section делает fadeIn получает #first, при прокрутке вниз теряет его, и так до последнего. Не могу сообразить как написать условие, после того как анимация возвращает прокрутку вверх...
http://ofb3752.bget.ru/test.html

var windo = $(window);
  var blocktop = $('#blocktop');
  var animBlock  = $('#blocktop').offset().top;

  windo.scroll(function (){

   if (!blocktop.hasClass('fixed') && windo.scrollTop() > animBlock) {
    blocktop.addClass('fixed').data('top', animBlock);
   } else if (blocktop.hasClass('fixed') && (windo.scrollTop() < blocktop.data('top'))) {
    blocktop.removeClass('fixed');
   }

  });
   
  var firstSection = $('#first');
  var nextSection = firstSection.next();

  blocktop.scroll(function (){
    if ($(this).scrollTop() > (blocktop.height() / 2)) {
      $(firstSection).fadeOut().attr('id', '');
      var y = blocktop.animate({
        scrollTop: 0,
      }, 'fast');
    } else {
    }
  });

laimas 02.03.2015 13:36

Задать callback-функцию в параметрах анимации.

hhh 02.03.2015 13:51

Спасибо, вышло.
только дальше второго сэкшена процесс не идет.
blocktop.scroll(function (){
    if ($(this).scrollTop() > (blocktop.height() / 2)) {
      $(firstSection).fadeOut().attr('id', '');
     blocktop.animate({
        scrollTop: 0,
      },
    'fast',
     function() {
        nextSection.fadeIn().attr('id', 'first');
     });
    } 
  });

laimas 02.03.2015 14:57

>как написать условие, после того как анимация возвращает прокрутку вверх

scrollTop: 0

Что не так? Хотели после того как scrollTop = 0, получили это, а то, что не все "тухнет", так анимация причем? Надо чтобы на протяжении ее от до что-то там тухло, так следите тогда за состоянием анимации - параметр step.

hhh 02.03.2015 16:23

Спасибо, колбэк то самое. Немножко нашаманил и получилось. Хоть и по-дилетански)

var firstSection = $('#first');
  var nextSection = firstSection.next();

  blocktop.scroll(function (){   
  
    if ($(this).scrollTop() > (blocktop.height() / 2)) {
      $('#first').fadeOut().attr('id', '').addClass('next');
     blocktop.animate({
        scrollTop: 0,
      },
    'fast',
     function() {
        $('.next').next().fadeIn().addClass('next')
        .prev().removeClass('next').hide();
     });
    } 
    else if ($('section:last-of-type').hasClass('next')) {
      setTimeout(removeFixed, 1000);
    } 
  });

  function removeFixed() {
    $('#blocktop').removeClass('fixed');
  }


http://ofb3752.bget.ru/test.html


Часовой пояс GMT +3, время: 14:33.