[英]Add brand logo and a li when navbar fixed top on scroll
<div class="container" id="menubar_1">
<nav class="navbar navbar-inverse" id="menubar_1">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#main_menu" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="assets/images/logo.png" alt="logo" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="main_menu">
<ul class="nav navbar-nav menu_bar text-uppercase">
<li class="active"><a href="#">adfadad</a></li>
<li><a href="#">adfafaf</a></li>
<li><a href="#">adadfa</a></li>
<li><a href="#">ada</a></li>
<li class="contact_us"><a href="#">adfadfadf</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
通常navbar已进入没有barnd-logo和li的last-child的容器中。我希望将navbar滚动到顶部容器类的结果删除,并将navbar-brand,li的最后一个孩子添加到navbar中时的结果。 我将尝试下面给出的这个js。
var distance = $('#menubar_1').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() >= distance) {
$('#menubar_1').addClass("fixed_top");
$('#menubar_1').removeClass("container");
$('#menubar_1').addClass("navbar-brand");
$('#menubar_1').addClass("contact_us");
} else {
$('#menubar_1').removeClass("fixed_top");
$('#menubar_1').addClass("container");
$('#menubar_1').removeClass("navbar-brand");
$('#menubar_1').removeClass("contact_us");
}
});
然后是固定顶部的CSS:
.fixed_top {
width: 100%;
height: 50px;
top: 0px;
position: fixed;
overflow: visible!important;
z-index: 9998;
background: #fff;
padding-top:15px;
padding-bottom: 15px;
}
请帮助我的脚本
终于我得到了答案
<script>
var distance = $('#menubar_1').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() >= distance) {
$('#menubar_1').addClass("navbar-fixed-top");
$('#menubar_1').removeClass("container");
$('.navbar-brand').css("float" , "none");
$('.navbar-brand').css("display" , "block");
$('.contact_us').css("display" , "block");
} else {
$('#menubar_1').removeClass("navbar-fixed-top");
$('#menubar_1').addClass("container");
$('.navbar-brand').css("display" , "none");
$('.contact_us').css("display" , "none");
}
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.