Сложный скрипт скролла
Всем привет! Зашел значит в тупик в логике скрипта) На примере понятно до того момента как первый 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 { } }); |
Задать callback-функцию в параметрах анимации.
|
Спасибо, вышло.
только дальше второго сэкшена процесс не идет. blocktop.scroll(function (){ if ($(this).scrollTop() > (blocktop.height() / 2)) { $(firstSection).fadeOut().attr('id', ''); blocktop.animate({ scrollTop: 0, }, 'fast', function() { nextSection.fadeIn().attr('id', 'first'); }); } }); |
>как написать условие, после того как анимация возвращает прокрутку вверх
scrollTop: 0 Что не так? Хотели после того как scrollTop = 0, получили это, а то, что не все "тухнет", так анимация причем? Надо чтобы на протяжении ее от до что-то там тухло, так следите тогда за состоянием анимации - параметр step. |
Спасибо, колбэк то самое. Немножко нашаманил и получилось. Хоть и по-дилетански)
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. |