如何使用jQuery在滚动时替换Bootstrap导航栏品牌中的图像

Question

>基本上我的问题是，一旦您开始滚动网站，我想将 Bootstrap 导航中的导航栏品牌图像文件更改为其他文件。当网站位于页面顶部时，导航栏是透明的，但是一旦开始滚动，导航背景就会变成白色。我希望导航栏品牌上的图像也更改为我拥有的不同颜色的图像，以便在导航背景更改后它仍然可见。

有人有想法吗？这是我拥有的HTML和当前的jQuery标记。

    <div class="container">
            <!-- Navbar Header -->
            <div class="navbar-header">
                <!-- Collapse Toggle -->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!-- /.collape-toggle -->
                <!-- Navbar Brand -->
                <a href="#" class="navbar-brand"><img src="img/blockins-logo.png" alt="Logo" draggable="false"></a>
                <!-- /.navbar-brand -->
            </div>
            <!-- /.navbar-header -->
            <!-- Navbar Menu -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <!-- Menu -->
                <ul class="nav navbar-nav justified">
                    <li role="presentation"><a href="#page-top">Welcome</a></li>
                    <li role="presentation"><a href="#">Our Story</a></li>
                    <li role="presentation"><a href="#">Services</a></li>
                    <li role="presentation"><a href="#">Programs</a></li>
                    <li role="presentation"><a href="#">Contact</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li role="presentation">
                        <form class="navbar-form">
                            <a href="#" class="btn btn-primary"><i class="fa fa-plus" aria-hidden="true"></i>Career Opportunities</a>
                        </form>
                    </li>
                </ul>
                <!-- /.menu -->
            </div>
            <!-- /.navbar-menu -->
        </div>
    </nav>
$(document).ready(function() {
// Navigation color change 
$(window).scroll(function() {
    if ($(document).scrollTop() < 50) {
        $('nav').addClass('transparent');
    } else {
        $('nav').removeClass('transparent').css('color: black');
        $('')
    }
});

}(;

Answer 1

你可以像这样切换img src：

$(document).ready(function() {
  var image1 = 'img/blockins-logo.png';
  var image2 = 'img/blockins-logo2.png';
  $(window).scroll(function() {
    if ($(document).scrollTop() < 50) {
      $('nav').addClass('transparent');
      $('.navbar-brand img').attr('src',image1);
    } else {
      $('nav').removeClass('transparent').css('color: black');
      $('.navbar-brand img').attr('src',image2);
    }
  });
});

请注意，您可能会感觉到它，因为图像只会在您向下滚动后加载。

我能想到的另一个选择是像这样切换两个 html".navbar-brand"：

<!-- Navbar Brand -->
<a href="#" class="navbar-brand image1"><img src="img/blockins-logo.png" alt="Logo"></a>
<a href="#" class="navbar-brand image2" style="display:none;"><img src="img/blockins-logo2.png" alt="Logo"></a>
<!-- /.navbar-brand -->
<script>
$(document).ready(function() {
  $(window).scroll(function() {
    if ($(document).scrollTop() < 50) {
      $('nav').addClass('transparent');
      $('.image1').show();
      $('.image2').hide();
    } else {
      $('nav').removeClass('transparent').css('color: black');
      $('.image2').show();
      $('.image1').hide();
    }
  });
});
</script>

Answer 2

你应该能够用jquery更改img src。

 $(document).ready(function() {
        // Navigation color change 
        $(window).scroll(function() {
        var nav_img = $('.navbar-brand img');
        if ($(document).scrollTop() < 50) {
            $('nav').addClass('transparent');
            nav_img.attr("src","first.png");
        } else {
            $('nav').removeClass('transparent').css('color: black');
            nav_img.attr("src","second.png");
        }
        });
    });

Answer 3

另外，请确保您的div 嵌套正确。在当前结构中，您的导航标签在开始时没有提及，但在结束时会关闭。

$(window).scroll(function() {
            if ($(window).scrollTop() < 50) {
                $('nav').addClass('transparent');
                $('.brandLogo img').attr("src","img/blockins-logo.png");
            } else {
                $('nav').removeClass('transparent').css('color: black');
                $('.brandLogo img').attr("src","img2");
            }
        });