为什么这个jQuery脚本替换滚动上的徽标不起作用？

Question

我下载了这个免费的bootstrap主题，名为＆＃34; Worthy＆＃34;我喜欢它，但我需要为我的用途定制它。我的意思是制作徽标（img标签为id＆＃34; logo＆＃34;），如果你将最小的部分向下滚动，则淡入另一个图像。这有效，但它保持＆＃34; refading＆＃34;每次我向下滚动。 这是我制作和使用的jQuery脚本：

    jQuery(window).scroll(function() {
     if (jQuery(this).scrollTop() > 0) {
         $("#logo").fadeOut(function() {
             $(this).attr("src", "images/logo2.png").fadeIn();
         });
     } else {
         $("#logo").fadeOut(function() {
             $(this).attr("src", "images/logo.png").fadeIn();
         });
     }
 });

以下是Dropbox上的网站，如果你想看到它：https://www.dropbox.com/sh/1z2sz0hnemshboe/AACjQjFaoG92WTAQJkriIn_Ka?dl=0（徽标只是占位符，呵呵）

Answer 1

因为侦听器scroll将触发每个滚动事件。每次滚动页面。

在您scrolltTop() > 0的逻辑中，您还应该检查您是否已经更改了图像。您可以添加一个类，使用.data()，或直接检查src。

编辑：

以下是一些示例代码：

jQuery(window).scroll(function() {

  // Check if the current logo is set
  var isLogo2 = $("#logo").attr("src") === "images/logo2.png";


  if (!isLogo2 && jQuery(this).scrollTop() > 0) {

    // Change logo if NOT logo 2 and scrolled
    $("#logo").fadeOut(function() {
      $(this).attr("src", "images/logo2.png").fadeIn();
    });

  } else if (jQuery(this).scrollTop() == 0) {

    // Otherwise, if we're at the top of the page
    $("#logo").fadeOut(function() {
      $(this).attr("src", "images/logo.png").fadeIn();
    });
  }

});

注意，这些条件的逻辑是未经测试的，但如果遇到问题，您应该可以进行一些简单的调试。

编辑2：

哎呀，让我们来看一个工作片段的例子：

＆＃13;

＆＃13;

jQuery(window).scroll(function() {

  // Check if the current logo is set
  var isRed = $("body").hasClass("red");
  
  if (!isRed && jQuery(this).scrollTop() > 0) {

    // Change logo if NOT red and scrolled
    $("body").addClass("red");
    
    // Add a text to ensure we're not re-applying red
    // on EVERY scroll event
    $("<div class='alert'>CHANGED TO RED!</div>").appendTo('body').fadeOut(500);

  } else if (jQuery(this).scrollTop() === 0) {

    // Otherwise, if we're at the top of the page
    $("body").removeClass("red");
    
    // Add a text to ensure we're not re-applying red
    // on EVERY scroll event
    $("<div class='alert'>REMOVED RED!</div>").appendTo('body').fadeOut(500);

  }

});

＆＃13;

body {
  height: 9000px;
  background-color: blue;
}
.red {
  background-color: red;
}
.alert {
  background: #fff;
  position: fixed;
}
.css {
  position: fixed;
  background: green;
  top: 20px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="css"></div>

＆＃13;

＆＃13;

＆＃13;

此代码段不适用于图片上的src属性，但您应该看到逻辑能够将其应用于您的用例。