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

您应该可以使用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 2

你可以像这样切换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 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");
            }
        });

如何用jQuery滚动Bootstrap navbar-brand中的图像？

3 个答案: