当 navbar-shrink 处于活动状态时更改 img src

Question

我正在使用 bootstrap 模板，向下滚动时导航栏会缩小。我已将导航栏设为透明，直到它滚动，然后只需更改即可将其变为白色：

.navbar-default {
  background-color: transparent;
}
.navbar-default.navbar-shrink {
  background-color: #fff;
}

现在，由于 background-img，我的徽标大部分是白色的，但我希望它在 navbar-shrink 生效时更改为黑色版本。

我试图通过在 'navbar-shrink' class 使用 if 语句激活时更改图像 src attr 来实现它，但它一定有问题。

我尝试了不同的方法并想出了这个：

$(document).ready(function() {
if($('nav').hasClass('navbar-shrink')) ({
    $('.pull-left img').attr('src', 'img/dolphin-nav2.svg');
  });
});

或这个

$(document).ready(function() {
if($('nav').attr('class', 'navbar-shrink')) ({
    $('.pull-left img').attr('src', 'img/dolphin-nav2.svg');
  });
});

但两者都不起作用

Answer 1

只需将两张图片添加到您的源代码中，然后根据 navbar-shrink class.

show/hide 添加合适的图片

<div class="nav">
  <img class="white-image" ... />
  <img class="dark-image" ... />
</div>


.nav .white-image { display:none; }
.nav .dark-image  { display:block; }
.nav.navbar-shrink .white-image { display: block; }
.nav.navbar-shrink .dark-image  { display: none; }

否则，您需要将 src 更改逻辑添加到滚动事件中，否则它只会在页面加载时调用一次。

$(document).ready(function() {
    $(window).on('scroll', function() {
      if($('nav').attr('class', 'navbar-shrink')) {
        $('.pull-left img').attr('src', 'img/dolphin-nav2.svg');
      } else {
        ...
      }
    });
});

请注意，您的 if 语句括号 { }

周围有错误的括号

当 navbar-shrink 处于活动状态时更改 img src

Change img src when navbar-shrink is active

jquery

if-statement

navbar

twitter-bootstrap