Bootstrap Navbar徽標和菜單CSS類在滾動后更改
[英]Bootstrap Navbar Logo & Menu CSS classes change after scroll
問題描述
如何在滾動后更改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>
2 個解決方案
解決方案1
2 已采納 2017-09-01 16:24:53
您可以添加第二個徽標，當導航欄具有.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>
解決方案2
1 2017-09-01 16:27:16
因為滾動事件會激活更多時間，所以您可以將代碼更改為：
$(window).scroll(function() {
var scrolltop = $(this).scrollTop();
var sticky = $('.sticky-navbar.sticky').length;
if (scrolltop > 50 && sticky == 0) {
$('.sticky-navbar').addClass('sticky')
.find('.navbar-brand img').attr('src', 'logo__web__dark.png');
return;
}
if (scrolltop <= 50 && sticky != 0) {
$('.sticky-navbar').removeClass('sticky')
.find('.navbar-brand img').attr('src', 'assets/images/logo__web__light.png');
}
});
這樣，每個條件只會切換一次類和圖像源：
scrolltop > 50
$(window).scroll(function() { var scrolltop = $(this).scrollTop(); var sticky = $('.sticky-navbar.sticky').length; if (scrolltop > 50 && sticky == 0) { $('.sticky-navbar').addClass('sticky') .find('.navbar-brand img').attr('src', 'logo__web__dark.png'); console.log('changed on > 50'); return; } if (scrolltop <= 50 && sticky != 0) { $('.sticky-navbar').removeClass('sticky') .find('.navbar-brand img').attr('src', 'assets/images/logo__web__light.png'); console.log('changed on <= 50'); } });
.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; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <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>
bootstrap 4 - 導航欄品牌標志在向下滾動時不會改變
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.