0

I am trying to change the logo image src if not window scrollTop and backwards with a fadeIn and fadeOut effect, but even if you scroll once, fadeIn & Out happens multiple times.

I figured out with console.log that even if you scroll once (mousewheel or arrows), it logs many times the message (like 8,10 or 15 times). That means that the logo flashes always 10+ times before changing the src to the other image.

jQuery:

$(window).scroll(function () {
    if ($(window).scrollTop()) {
        $.when($('#navbar').css('padding', '0px')).done(function () {
            $('.logo img').fadeOut(400, function () {
                $('.logo img').attr('src', 'images/small-logo.png');
                console.log('bot');
            }).fadeIn();
        });
    } else {
        $.when($('#navbar').css('padding', '20px 0px')).done(function () {
            $('.logo img').fadeOut(400, function () {
                $('.logo img').attr('src', 'images/top-logo.png');
                console.log('top');
            }).fadeIn();
        });
    }
});

HTML:

<div class="col-lg-12">
   <div class="col-lg-3 logo no-padding-left">
      <a href="index.php">
        <img src="images/logo.png"/>
      </a>
   </div>
   <div class="col-lg-9 no-padding-right">
      <div class="navbar-header">
        <div id="navbar" class="navbar-collapse collapse">
           <ul class="nav navbar-nav">
               .
               .
               .
           </ul>
        </div>
     </div>
   </div>
</div>

I've found and tried many solutions (like .stop(), if animated etc), but nothing seemed to work for me and i don't know why.

Thank you in advance.

2 Answers 2

1

the problem can be solved using a flag that checks if the page is scrolled to the top or not.

You just have to change your JS code like this:

$isScrolledToTop = false;

$(window).scroll(function () {
    if ($(window).scrollTop()){
        if($isScrolledToTop == false) {
            $.when($('#navbar').css('padding', '0px')).done(function () {
                $('.logo img').fadeOut(400, function () {
                    $('.logo img').attr('src', 'images/small-logo.png');
                    console.log('bot');
                }).fadeIn();
            });
            $isScrolledToTop = true;
        } 
    } else {
        if($isScrolledToTop == true){
            $.when($('#navbar').css('padding', '20px 0px')).done(function () {
                $('.logo img').fadeOut(400, function () {
                    $('.logo img').attr('src', 'images/small-logo.png');
                    console.log('top');
                }).fadeIn();
            });
            $isScrolledToTop = false;
        }
    }
});

In this way you perform image change only in two situations:

  • You move away from top of the page
  • You get back to top of the page

Try it, it should work!

Bye

1

What if you built in a short delay to allow more scroll events to come in before you start animating like this?

var animationTimeout;
var isAtTop = true;
$(window).scroll(function () {
      if ($(window).scrollTop()) {
         $.when($('#navbar').css('padding', '0px')).done(function () {
            if (isAtTop) {
                if (animationTimeout) clearTimeout(animationTimeout);

                animationTimeout = setTimeout(function() {
                    $('.logo img').fadeOut(400, function () {
                        $('.logo img').attr('src', 'images/small-logo.png');
                        console.log('bot');
                    }).fadeIn();
                }
                , 100);
             });
             isAtTop = false;
         }
     } else {
        $.when($('#navbar').css('padding', '20px 0px')).done(function () {
            if (!isAtTop) {
                if (animationTimeout) clearTimeout(animationTimeout);

                animationTimeout = setTimeout(function() {
                    $('.logo img').fadeOut(400, function () {
                         $('.logo img').attr('src', 'images/top-logo.png');
                         console.log('top');
                    }).fadeIn();
                },
                100);
            });
            isAtTop = true;
        }
     }
2
  • Thank you, just tried it and the image doesn't flash for a single scroll. But the problem now is that the image flashes whenever you scroll. Is there a way to prevent this fade if it happened already once, untill you reach top again? Mar 1, 2016 at 9:29
  • I just edited the code to include a flag that might solve that problem for you? Let me know.
    – Zac Braddy
    Mar 1, 2016 at 9:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.