[英]How do you make it so the navbar is transparent then changes color using bootstrap 3. (Affix)
Ive been trying to find out how to do this for a week and have been unable to do it. 我一直试图找出如何做一个星期,并一直无法做到这一点。 My html navbar looks like this.
我的html导航栏看起来像这样。
<div class="maincontainer">
<!--Navbar-->
<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header" >
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Pixoweb</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Examples<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Example 1</a></li>
<li><a href="#">Example 2</a></li>
<li><a href="#">Example 3</a></li>
<li><a href="#">Example 4</a></li>
</ul>
</li>
<li><a href="#contact" data-toggle="modal">Contact</a></li>
</ul>
</div>
</div>
</div>
Js JS
$('#myAffix').affix({
offset: {
top: 100,
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true))
}
}
})
css CSS
.affix {
position: fixed !important;
top: 0 !important;
width: 100% !important;
background-color: #957595 !important;
}
So far this has made it so that the navbar goes behind the the context and images. 到目前为止,这使得导航栏落后于上下文和图像。 I would like it if someone can help me
如果有人可以帮助我,我希望如此
Navbar has not gone behind the text/images, it has been 3d transformed by bootstrap affix so that it looks like it has gone behind. Navbar并没有落后于文本/图像,它已经被bootstrap词缀转换为3d,因此它看起来已经落后了。 I assume that you want to change the background color of the navbar when it is pinned (affixed).
我假设您想要在固定(粘贴)时更改导航栏的背景颜色。 You can use following CSS.
您可以使用以下CSS。 Note: you don't need JavaScript.
注意:您不需要JavaScript。
.affix .navbar-default {
position: fixed !important;
top: 0 !important;
width: 100% !important;
background-color: #957595 !important;
}
.affix {
width: 100% !important;
}
I also struggled with my menu displaying behind my images, I fixed it by adding "z-index: 1;" 我也在显示我的图像背后的菜单,我通过添加“z-index:1;”来修复它。 to my nav class.
到我的导航班。 eg:.navbar-inverse in the style sheet
例如:样式表中的.navbar-inverse
.navbar-default {
background-color: #201f1f;
border-color: #f47d20;
border-bottom:#f47d20 5px solid;
padding-bottom:0px;
z-index: 1;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.