javascript - 窗口滚动后淡入和淡出多次发生

Question

我试图通过淡入和淡出效果来更改 Logo 图像 src(如果不是窗口滚动顶部和向后)，但即使滚动一次，淡入和淡出也会发生多次。

我通过 console.log 发现，即使您滚动一次(鼠标滚轮或箭头)，它也会记录多次消息(例如 8,10 或 15 次)。这意味着在将 src 更改为其他图像之前， Logo 始终闪烁 10 次以上。

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>

我找到并尝试了许多解决方案(例如 .stop()，如果是动画的话)，但似乎没有任何解决方案对我有用，我不知道为什么。

提前谢谢您。

Answer 1

可以使用检查页面是否滚动到顶部的标志来解决该问题。

你只需要像这样改变你的JS代码:

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

通过这种方式，您仅在两种情况下执行图像更改:

• 您离开页面顶部
• 您将返回页面顶部

尝试一下，应该有效!

再见