Javascript 如何用jQuery替换滚动引导navbar品牌中的图像？

基本上，我的问题是，一旦你开始在网站上滚动，我想将引导导航中的navbar品牌图像文件更改为另一个。 当网站位于页面顶部时，导航栏是透明的，但一旦开始滚动，导航背景将变为白色。我希望navbar品牌上的图像也能换成不同颜色的图像，这样在导航背景改变后仍然可见

有人有什么想法吗？这是我的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');
        $('')
    }
});

切换导航











$（文档）.ready（函数（）{
//导航颜色变化
$（窗口）。滚动（函数（）{
如果（$（文档）.scrollTop（）<50）{
$（'nav'）.addClass（'transparent'）；
}否则{
$（'nav'）.removeClass（'transparent'）.css（'color:black'）；
$('')
}
});

---

}))

您应该能够使用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");
        }
        });
    });

$（文档）.ready（函数（）{
//导航颜色变化
$（窗口）。滚动（函数（）{
var nav_img=$（“.navbar品牌img”）；
如果（$（文档）.scrollTop（）<50）{
$（'nav'）.addClass（'transparent'）；
导航img.attr（“src”、“first.png”）；
}否则{
$（'nav'）.removeClass（'transparent'）.css（'color:black'）；
导航img.attr（“src”，“second.png”）；
}
});
});

您应该能够使用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");
        }
        });
    });

$（文档）.ready（函数（）{
//导航颜色变化
$（窗口）。滚动（函数（）{
var nav_img=$（“.navbar品牌img”）；
如果（$（文档）.scrollTop（）<50）{
$（'nav'）.addClass（'transparent'）；
导航img.attr（“src”、“first.png”）；
}否则{
$（'nav'）.removeClass（'transparent'）.css（'color:black'）；
导航img.attr（“src”，“second.png”）；
}
});
});

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

<!-- 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>

$（文档）.ready（函数（）{
var image1='img/blockins logo.png'；
var image2='img/blockins-logo2.png'；
$（窗口）。滚动（函数（）{
如果（$（文档）.scrollTop（）<50）{
$（'nav'）.addClass（'transparent'）；
$（'navbar brand img'）.attr（'src'，image1）；
}否则{
$（'nav'）.removeClass（'transparent'）.css（'color:black'）；
$（'navbar brand img'）.attr（'src'，image2）；
}
});
});

请注意，您可能会感觉到，因为只有向下滚动时，图像才会加载

我能想到的另一个选择是切换两个html“.navbar brand”，如下所示：

$(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);
    }
  });
});

<!-- 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>

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
如果（$（文档）.scrollTop（）<50）{
$（'nav'）.addClass（'transparent'）；
$（'.image1'）.show（）；
$（'.image2'）.hide（）；
}否则{
$（'nav'）.removeClass（'transparent'）.css（'color:black'）；
$（'.image2'）.show（）；
$（'.image1'）.hide（）；
}
});
});

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

<!-- 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>

$（文档）.ready（函数（）{
var image1='img/blockins logo.png'；
var image2='img/blockins-logo2.png'；
$（窗口）。滚动（函数（）{
如果（$（文档）.scrollTop（）<50）{
$（'nav'）.addClass（'transparent'）；
$（'navbar brand img'）.attr（'src'，image1）；
}否则{
$（'nav'）.removeClass（'transparent'）.css（'color:black'）；
$（'navbar brand img'）.attr（'src'，image2）；
}
});
});

请注意，您可能会感觉到，因为只有向下滚动时，图像才会加载

我能想到的另一个选择是切换两个html“.navbar brand”，如下所示：

$(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);
    }
  });
});

<!-- 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>

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
如果（$（文档）.scrollTop（）<50）{
$（'nav'）.addClass（'transparent'）；
$（'.image1'）.show（）；
$（'.image2'）.hide（）；
}否则{
$（'nav'）.removeClass（'transparent'）.css（'color:black'）；
$（'.image2'）.show（）；
$（'.image1'）.hide（）；
}
});
});

另外，请确保您的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");
            }
        });

$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）<50）{
$（'nav'）.addClass（'transparent'）；
$（'.brandLogo img'）.attr（“src”，“img/blockins logo.png”）；
}否则{
$（'nav'）.removeClass（'transparent'）.css（'color:black'）；
$（'.brandLogo img'）.attr（“src”、“img2”）；
}
});

另外，请确保您的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");
            }
        });

$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）<50）{
$（'nav'）.addClass（'transparent'）；
$（'.brandLogo img'）.attr（“src”，“img/blockins logo.png”）；
}否则{
$（'nav'）.removeClass（'transparent'）.css（'color:black'）；