Question

我试图改变徽标图像src如果没有窗口scrollTop和向后用fadeIn和fadeOut效果，但即使你滚动一次，fadeIn＆amp;出现多次。

我用console.log想出即使你滚动一次（鼠标滚轮或箭头），它也会记录很多次信息（如8,10或15次）。这意味着在将src更改为另一个图像之前，徽标总是闪烁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;
        }
    }
});

这样，您只能在两种情况下执行图像更改：

您离开页面顶部
您回到页面顶部

试一试，它应该有效！

再见

FadeIn＆amp; fadeOut在窗口滚动后多次发生

1 个答案: