javascript - CSS 内容 :url() not working on anything other than chrome. 使用 JS 更改 src？

Question

我想使用 CSS 更改滚动条上的导航栏 Logo 。它已经使用 .affix 在滚动时改变了颜色 Bootstrap 提供的类。

<a  href="#"><img class="limg"  src="images/firstlogo.png" /></a>

我找到的唯一方法是:

 #custom-nav.affix .limg{
 content: url(../images/secondlogo.png);}

在 chrome 上完美运行。但是它不适用于 Firefox/IE/Microsoft Edge。

似乎有一个使用::before 和::after 前缀的解决方案，但这些对我不起作用。
可能是以下JS代码在scroll上实现了词缀类导致的。

$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
    $('#custom-nav').addClass('affix');
    $(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
    $('#custom-nav').removeClass('affix');
    $(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});

如果是这样，我是否可以更改它 <img src"">在 affix 时使用 JS激活 ?

Answer 1

只需在 scroll 回调中更改图像 src 属性:

    var startImg = "images/firstlogo.png",
        scrollImg = "images/secondlogo.png",
        $img = $('.limg');

    $(window).scroll(function() {
        if ($(".navbar").offset().top > 50) {
            $('#custom-nav').addClass('affix');
            $(".navbar-fixed-top").addClass("top-nav-collapse");

            // Set scrolling src
            $img.attr('src', scrollImg);
        } else {
            $('#custom-nav').removeClass('affix');
            $(".navbar-fixed-top").removeClass("top-nav-collapse");

            // Set default image src
            $img.attr('src', startImg);
        }
    });

超时示例

如下所述，由于对 DOM 元素的多次调用可能会导致一些性能问题，因此这里是带有 timeout 和缓存 DOM 变量的改进版本:

var startImg = "images/firstlogo.png",
  scrollImg = "images/secondlogo.png",
  $navBar = $(".navbar"),
  $customNav = $('#custom-nav'),
  $navBar = $(".navbar-fixed-top"),
  $img = $('.limg'),

  timeout;

  $(window).on('scroll', function() {
    if (timeout) clearTimeout(timeout)
    // Use timeout to not call function immediately
    timeout = setTimeout(function() {
      if ($navBar.offset().top > 50) {
        $customNav.addClass('affix');
        $navBar.addClass("top-nav-collapse");

        // Set scrolling src
        $img.attr('src', scrollImg);
      } else {
        $customNav.removeClass('affix');
        $navBar.removeClass("top-nav-collapse");

        // Set default image src
        $img.attr('src', startImg);
      }
    }, 250)
  });