jQuery - fadeOut on Scroll / fadeIn on "scrollstop"

Question

Hi everybody, i am trying to figure something out in jQuery and yes you may see now horrible code but i am not a programming expert ;-) So sorry if it hurts your eyes... But to describe the problem:

I have a div positioning working which gets fired by the scroll-event. What happens it that the scroll event gets fired a bunch of times which results in a flickering div. My plan is to fade out that div and fade back in as soon as no more scroll event is fired... How can i check that scrolling is over? I thought about a combination of timeout <-> scroll but actually nothing worked as i hoped... Heres what i got so far... Quite simple...

---

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

});

---

As you can see i left one of my last attempts in there but its quite a noobish solution and by the way... The callbacks of the fade--fcuntion didnt work as expected...

THANKS IN ADVANCE FOR ANY HELP

Kind regards, Bosh

Answer 1

Unfortunately there is no concept of scroll-stop so you can't really trigger an animation from that. What may work better is to instead animate the 'top' property of your div so that it smoothly slides to it's new position instead of flickering.

        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 while i was happy yesterday... Reality stroke back today... SAFARI reacts with not re-rendering all necessary fragments behind the moving div. Especially over tinyMCE's iframe. So i ended up with the following and this works quite well. Fades out the div -> animation to position -> Fade in only if callback is fired..

$(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

You can use jQuery special events for creating a scrollstop event. James Padolsey has written a great example of scrollstop event.

Answer 4

Fix to not pulse on scroll! 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);
  });
 }
});