滚动后如何在 Bootstrap 3 中更改 Navbar-Brand Image 和 Menu 类？
我的 js 技能太低了，我不知道如何在将我的 logo__web__light.png 滚动到 logo__web__dark.png 和导航栏菜单类后进行更改。
提前致谢!
$(window).scroll(function() {
if($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/
{
$('.sticky-navbar').addClass('sticky');
} else {
$('.sticky-navbar').removeClass('sticky');
}
});.sticky-navbar {
background-color: rgba(0, 0, 0, 0);
/* Transparent = rgba(0,0,0,0) / Translucent = (0,0,0,0.5) */
height: 60px;
border-bottom: 0px;
transition: background-color .5s ease 0s;
}
.sticky-navbar.sticky {
background-color: rgba(0, 0, 0, 0.46);
height: 105px;
transition: background-color .5s ease 0s;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!DOCTYPE html>
<html lang="en">
<body>
<div class="navbar navbar-inverse navbar-fixed-top sticky-navbar">
<div class="container-fluid custom-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
<a class="navbar-brand" href="#"><img src="assets/images/logo__web__light.png" alt=""></a>
</div>
<div class="collapse navbar-collapse" id="navMain">
<ul class="nav navbar-nav pull-right custom-pull">
<li class="active"><a href="#">Home</a></li>
<li><a href="#1">Work</a></li>
<li><a href="#2">Services</a></li>
<li><a href="#3">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<section class="demo">
<div class="container">
<div class="row">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et sodales sem, vel molestie turpis. Sed vitae metus tempus tellus fermentum mollis. Nam eleifend ipsum ut urna viverra interdum. Mauris ac rhoncus eros, in pulvinar massa. Curabitur venenatis ipsum quis nulla pulvinar, quis bibendum urna interdum. Fusce ac semper nulla, sit amet finibus dui. Quisque turpis nisi, gravida ultricies felis et, posuere accumsan elit. Pellentesque mollis consectetur neque a auctor. Donec iaculis dui fermentum lacus lobortis, non dignissim est tempor. Mauris vel convallis est. Donec ac urna eget purus sagittis semper. In quis porttitor mauris.
Nunc vehicula nulla eu tempus cursus. Aenean sagittis elementum nunc, vel cursus mauris ornare id. Sed ullamcorper urna massa, sit amet scelerisque nisi aliquam eu. Praesent tristique felis vitae fermentum ornare. Morbi ac nisl vel ipsum sagittis gravida nec nec nisi. Ut quis elit congue, elementum nisi sit amet, vehicula odio. Proin porta arcu neque, sit amet suscipit felis euismod ut. Pellentesque facilisis tincidunt risus et hendrerit. Phasellus condimentum at leo sit amet bibendum.
Suspendisse aliquam eros ante, at posuere lectus accumsan sed. Praesent est mi, pretium ac sem vitae, aliquet accumsan nibh. Maecenas est libero, eleifend eget dui ac, fermentum auctor leo. Cras feugiat vitae nisi vitae accumsan. Maecenas luctus nisl massa. Morbi tempus ornare mauris quis finibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam euismod felis et mi fringilla, non convallis tortor egestas. Maecenas vestibulum nisl et nibh rhoncus hendrerit et ut sapien.
In orci felis, scelerisque sed lectus blandit, semper commodo nisl. Sed in tempus lectus. Ut ultrices, justo eget tristique venenatis, velit tellus fermentum orci, eu tempor lacus turpis id ligula. Cras fermentum vel eros quis malesuada. Phasellus elementum in magna vel elementum. Integer fermentum gravida tellus in luctus. Fusce venenatis velit ac ipsum fermentum, eu fermentum elit dictum. Proin mattis lobortis nibh, vel ultrices justo semper in. In elementum nec purus id imperdiet.
Sed rutrum nisi ante, vitae vehicula dui dapibus non. Integer fermentum velit a leo rutrum, at ultrices mauris volutpat. Pellentesque maximus ex id augue ornare elementum a quis sapien. Nullam vel vestibulum risus. Nulla ante sapien, pellentesque ac leo sed, feugiat tempus enim. Pellentesque at mauris in ex laoreet tempor. Donec pharetra mattis quam, et tincidunt turpis ornare at. Vivamus dignissim blandit fringilla. Suspendisse semper dolor eros, at hendrerit felis iaculis nec. Morbi sapien sapien, porta eu est eget, auctor aliquet ante. Duis eget sodales mauris. Donec bibendum sollicitudin semper. Vivamus non gravida dolor. Vivamus suscipit massa ut luctus mattis. Quisque ultrices porttitor efficitur.
Sed felis lorem, suscipit vitae massa non, pretium malesuada dui. Vivamus sagittis arcu a sem finibus blandit. Curabitur semper nisi justo, congue malesuada lorem mattis a. Nam pulvinar, sem quis auctor viverra, enim sem pellentesque eros, id ultricies lectus urna non velit. Duis tincidunt elementum ipsum, ac semper felis ullamcorper eget. Aenean et sem at lacus aliquam vestibulum non pretium dui. Aenean placerat eros magna, vel venenatis turpis lobortis id. Pellentesque at elit urna. Sed vestibulum odio ex, ut vehicula eros varius at. Quisque ac risus in arcu hendrerit volutpat. In rhoncus fermentum convallis. Duis interdum, sem id ullamcorper sagittis, elit dui blandit ex, interdum volutpat odio magna et neque. Fusce cursus id lorem quis ornare. Suspendisse luctus mauris in elit finibus, vitae convallis velit commodo. Proin ligula leo, feugiat non risus sed, finibus malesuada orci. Donec egestas porttitor est, sed viverra nulla dignissim quis.</p>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>最佳答案
您可以添加第二个 Logo ，当导航栏具有 .sticky 类时应该出现，并根据该类隐藏/显示图像
$(window).scroll(function() {
if($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/
{
$('.sticky-navbar').addClass('sticky');
} else {
$('.sticky-navbar').removeClass('sticky');
}
});.sticky-navbar {
background-color: rgba(0, 0, 0, 0);
/* Transparent = rgba(0,0,0,0) / Translucent = (0,0,0,0.5) */
height: 60px;
border-bottom: 0px;
transition: background-color .5s ease 0s;
}
.sticky-navbar.sticky {
background-color: rgba(0, 0, 0, 0.46);
height: 105px;
transition: background-color .5s ease 0s;
}
.sticky-navbar .sticky-logo,
.sticky-navbar.sticky .main-logo
{
display: none;
}
.sticky-navbar.sticky .sticky-logo{
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!DOCTYPE html>
<html lang="en">
<body>
<div class="navbar navbar-inverse navbar-fixed-top sticky-navbar">
<div class="container-fluid custom-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
<a class="navbar-brand main-logo" href="#"><img src="assets/images/logo__web__light.png" alt="">logo 1</a>
<a class="navbar-brand sticky-logo" href="#"><img src="assets/images/logo__web__light.png" alt="">logo 2</a>
</div>
<div class="collapse navbar-collapse" id="navMain">
<ul class="nav navbar-nav pull-right custom-pull">
<li class="active"><a href="#">Home</a></li>
<li><a href="#1">Work</a></li>
<li><a href="#2">Services</a></li>
<li><a href="#3">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<section class="demo">
<div class="container">
<div class="row">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et sodales sem, vel molestie turpis. Sed vitae metus tempus tellus fermentum mollis. Nam eleifend ipsum ut urna viverra interdum. Mauris ac rhoncus eros, in pulvinar massa. Curabitur venenatis ipsum quis nulla pulvinar, quis bibendum urna interdum. Fusce ac semper nulla, sit amet finibus dui. Quisque turpis nisi, gravida ultricies felis et, posuere accumsan elit. Pellentesque mollis consectetur neque a auctor. Donec iaculis dui fermentum lacus lobortis, non dignissim est tempor. Mauris vel convallis est. Donec ac urna eget purus sagittis semper. In quis porttitor mauris.
Nunc vehicula nulla eu tempus cursus. Aenean sagittis elementum nunc, vel cursus mauris ornare id. Sed ullamcorper urna massa, sit amet scelerisque nisi aliquam eu. Praesent tristique felis vitae fermentum ornare. Morbi ac nisl vel ipsum sagittis gravida nec nec nisi. Ut quis elit congue, elementum nisi sit amet, vehicula odio. Proin porta arcu neque, sit amet suscipit felis euismod ut. Pellentesque facilisis tincidunt risus et hendrerit. Phasellus condimentum at leo sit amet bibendum.
Suspendisse aliquam eros ante, at posuere lectus accumsan sed. Praesent est mi, pretium ac sem vitae, aliquet accumsan nibh. Maecenas est libero, eleifend eget dui ac, fermentum auctor leo. Cras feugiat vitae nisi vitae accumsan. Maecenas luctus nisl massa. Morbi tempus ornare mauris quis finibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam euismod felis et mi fringilla, non convallis tortor egestas. Maecenas vestibulum nisl et nibh rhoncus hendrerit et ut sapien.
In orci felis, scelerisque sed lectus blandit, semper commodo nisl. Sed in tempus lectus. Ut ultrices, justo eget tristique venenatis, velit tellus fermentum orci, eu tempor lacus turpis id ligula. Cras fermentum vel eros quis malesuada. Phasellus elementum in magna vel elementum. Integer fermentum gravida tellus in luctus. Fusce venenatis velit ac ipsum fermentum, eu fermentum elit dictum. Proin mattis lobortis nibh, vel ultrices justo semper in. In elementum nec purus id imperdiet.
Sed rutrum nisi ante, vitae vehicula dui dapibus non. Integer fermentum velit a leo rutrum, at ultrices mauris volutpat. Pellentesque maximus ex id augue ornare elementum a quis sapien. Nullam vel vestibulum risus. Nulla ante sapien, pellentesque ac leo sed, feugiat tempus enim. Pellentesque at mauris in ex laoreet tempor. Donec pharetra mattis quam, et tincidunt turpis ornare at. Vivamus dignissim blandit fringilla. Suspendisse semper dolor eros, at hendrerit felis iaculis nec. Morbi sapien sapien, porta eu est eget, auctor aliquet ante. Duis eget sodales mauris. Donec bibendum sollicitudin semper. Vivamus non gravida dolor. Vivamus suscipit massa ut luctus mattis. Quisque ultrices porttitor efficitur.
Sed felis lorem, suscipit vitae massa non, pretium malesuada dui. Vivamus sagittis arcu a sem finibus blandit. Curabitur semper nisi justo, congue malesuada lorem mattis a. Nam pulvinar, sem quis auctor viverra, enim sem pellentesque eros, id ultricies lectus urna non velit. Duis tincidunt elementum ipsum, ac semper felis ullamcorper eget. Aenean et sem at lacus aliquam vestibulum non pretium dui. Aenean placerat eros magna, vel venenatis turpis lobortis id. Pellentesque at elit urna. Sed vestibulum odio ex, ut vehicula eros varius at. Quisque ac risus in arcu hendrerit volutpat. In rhoncus fermentum convallis. Duis interdum, sem id ullamcorper sagittis, elit dui blandit ex, interdum volutpat odio magna et neque. Fusce cursus id lorem quis ornare. Suspendisse luctus mauris in elit finibus, vitae convallis velit commodo. Proin ligula leo, feugiat non risus sed, finibus malesuada orci. Donec egestas porttitor est, sed viverra nulla dignissim quis.</p>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>关于javascript - Bootstrap Navbar Logo 和 Menu CSS 类在滚动后发生变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46004181/