替换滚动上的img src

Question

我正在尝试替换logo-text-black src属性，以使svg img随着用户滚动而变化。可以将其添加到当前脚本中吗？

img / logo-text-white.svg //最高状态

img / logo-text-black.svg //滚动状态

的HTML

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="navbar-header">
  <a href="#top"><img class="logo" src="img/logo.svg"></a>
   <a href="#top"><img class="logo-text" src="img/logo-text-white.svg">
 </a>
 </div>
</nav>

JS

$(window).scroll(function() {
   var value = $(this).scrollTop();
   if (value > 100)
   $(".navbar-default").css("background", "white"); // Scroll State
   else
  $(".navbar-default").css("background", "transparent"); // Top state
});

Answer 1

要替换图像源，您可以使用jQuery .attr方法：

var initialSrc = "img/logo.svg";
var scrollSrc = "img/logo-text-black.svg";

$(window).scroll(function() {
   var value = $(this).scrollTop();
   if (value > 100)
      $(".logo").attr("src", scrollSrc);
   else
      $(".logo").attr("src", initialSrc);
});

这种方法只需要一个<img>带有logoHTML类的类：

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="navbar-header">
    <a href="#top"><img class="logo" src="img/logo.svg"></a>
 </div>
</nav>