jQuery - fadeOut на Scroll / fadeIn на "scrollstop"

Question

У меня работает div-позиционирование, которое запускается событием прокрутки. Случается так, что событие прокрутки запускается несколько раз, что приводит к мерцающему div. Мой план состоит в том, чтобы исчезнуть из этого div и исчезнуть, как только больше не будет запущено событие прокрутки. Как я могу проверить, что прокрутка закончена? Я думал о комбинации прокрутки timeout <->, но на самом деле ничего не получилось, как я надеялся. Вот что я получил до сих пор.

$(document).ready(function(){

    //var animActive = false;

    $(window).scroll(function() {

        /*
        if (animActive == false){
            animActive = true;
            $('.mceExternalToolbar').fadeOut(100, function () {
                $('.mceExternalToolbar').fadeIn(3000, function () {
                    animActive = false;
                    console.log("NOW");
                });
            });
        }
        */

        topParentx = $('#tinyMCEwrapper').position().top;
        if ($(this).scrollTop() >= topParentx){
            $('.mceExternalToolbar').css('top', ($(this).scrollTop()-topParentx) + "px");
        } else {
            $('.mceExternalToolbar').css('top', "0px");
        };
    });

});

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

Answer 1

К сожалению, нет концепции прокрутки, поэтому вы не можете запустить анимацию. Что может сработать лучше, так это вместо этого анимируйте свойство 'top' вашего div, чтобы оно плавно перемещалось в новое положение вместо мерцания.

        topParentx = $('#tinyMCEwrapper').position().top;
        var topTarget = "0px";
        if ($(this).scrollTop() >= topParentx){
            topTarget = ($(this).scrollTop()-topParentx) + "px";
        }
        $('.mceExternalToolbar').stop().animate({top, topTarget}, 500);

Answer 2

Исправлено, чтобы не пульсировать при прокрутке! SetTimeout

var animActive = false;
$(window).scroll(function(){
    if (animActive == false){
        animActive = true;
        $('#target').fadeOut(100, function () {
            var scrl = setTimeout( function(){
            animActive = false;
            $('#target').fadeIn(500);
            }, 2000);
        });
    }
});

Answer 3

Вы можете использовать специальные события jQuery для создания события scrollstop. Джеймс Падолси написал отличный пример события прокрутки .

Answer 4

Хорошо, пока я был счастлив вчера ... Реальность вернулась сегодня ... SAFARI реагирует, не перерисовывая все необходимые фрагменты позади движущегося div. Особенно за iframe tinyMCE. Итак, я закончил со следующим, и это работает довольно хорошо. Затухание div -> анимация в положение -> Fade in, только если обратный вызов запущен ..

$(document).ready(function(){

    $(window).scroll(function() {

        topParentx = $('#tinyMCEwrapper').position().top;

        var topTarget = "0px";

        if ($(this).scrollTop() >= topParentx){
            topTarget = ($(this).scrollTop()-topParentx) + "px";
            $('.mceExternalToolbar').animate({opacity: 0}, 1);
        }
        $('.mceExternalToolbar').stop().animate({top: topTarget}, 200, 'swing', function(){
            $('.mceExternalToolbar').animate({opacity: 1}, 100, 'swing');

        });

    });

});