jQuery - fadeOut on Scroll/fondu sur "scrollstop"

Question

J'ai un travail de positionnement div qui est déclenché par l'événement scroll. Qu'est-ce qui se passe que l'événement de défilement se déclenche un tas de fois qui se traduit par un div scintillant. Mon plan est de faire disparaître ce div et de revenir en arrière dès que plus aucun événement de défilement n'est déclenché. Comment puis-je vérifier que le défilement est terminé? J'ai pensé à une combinaison de timeout < -> scroll mais en fait rien n'a fonctionné comme je l'espérais. Voici ce que j'ai eu jusqu'ici.

$(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"); 
     }; 
    }); 

}); 

Comme vous pouvez le voir je suis parti un de mes dernières tentatives là-dedans, mais les callbacks de la fonction de fondu ne fonctionne pas comme prévu.

Answer 1

Malheureusement, il n'y a pas de concept de scroll-stop, donc vous ne pouvez pas vraiment déclencher une animation à partir de ça. Ce qui fonctionne mieux, c'est d'animer la propriété 'top' de votre div pour qu'elle glisse doucement vers sa nouvelle position au lieu de scintiller.

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

Answer 2

Ok alors que j'étais heureux hier ... coup de réalité retour aujourd'hui ... SAFARI réagit avec pas re-rendu tous les fragments nécessaires derrière la div mobile. Surtout sur iframe de tinyMCE. Donc, je me suis retrouvé avec ce qui suit et cela fonctionne très bien. La div fane -> animation à la position -> Entrée en fondu uniquement si le rappel est tiré ..

$(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'); 

     }); 

    }); 

}); 

Answer 3

Vous pouvez utiliser des événements spéciaux jQuery pour créer un événement scrollstop. James Padolsey a écrit un grand example of scrollstop event.

Answer 4

Correction de ne pas déclencher le défilement! 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); 
     }); 
    } 
});