Jquery 导航栏覆盖背景色&;形象
问题1: 当我向下滚动时,我想在div(顶部横幅)的背景色和背景图像顶部粘贴导航栏覆盖。背景色将覆盖我的导航栏 我如何实现这样的效果,即我的导航栏将位于div类顶部横幅的背景色之上 还有一个问题是我的导航栏本身留有空白,当我添加data spy词缀时,导航栏稍微向右移动,导致左侧出现空白,当我将屏幕重新缩放到更小的设备尺寸时,导航栏折叠菜单不可点击,除非我稍微向右点击,然后切换菜单。我不知道为什么会有这样的问题。我该怎么修呢 感谢您帮助解决此问题强> 下面是我的代码Jquery 导航栏覆盖背景色&;形象,jquery,html,css,twitter-bootstrap,Jquery,Html,Css,Twitter Bootstrap,问题1: 当我向下滚动时,我想在div(顶部横幅)的背景色和背景图像顶部粘贴导航栏覆盖。背景色将覆盖我的导航栏 我如何实现这样的效果,即我的导航栏将位于div类顶部横幅的背景色之上 还有一个问题是我的导航栏本身留有空白,当我添加data spy词缀时,导航栏稍微向右移动,导致左侧出现空白,当我将屏幕重新缩放到更小的设备尺寸时,导航栏折叠菜单不可点击,除非我稍微向右点击,然后切换菜单。我不知道为什么会有这样的问题。我该怎么修呢 感谢您帮助解决此问题 下面是我的代码 <html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.navbar-header,
.navbar-brand {
line-height: 100px;
height: 100px;
padding-top: 0;
}
.affix .navbar-default {
position: fixed !important;
top: 0 !important;
width: 100% !important;
background-color: #957595 !important;
}
.affix {
width: 100% !important;
}
@media screen and (min-width: 768px) {
.navbar-header {
padding-left: 200px;
text-align: center;
}
}
.top-banner{
background-color: #b0c4de;
background-image: url("bi-uk-office7-2.jpg");
background-repeat: no-repeat;
background-position: right top;
}
</style>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<!-- Static navbar -->
<div id="nav" data-spy="affix">
<nav class="navbar navbar-default" style="background-color:black;background: rgba(0,0,0,0.9);">
<div class="container-fluid">
<div class="navbar-header header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Logo</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#"><font color="white">Link 1</font></a></li>
<li><a href="/list"><font color="white">Link 2</font></a></li>
<li><a href="/list"><font color="white">Link 3</font></a></li>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
<section>
<div class="col-xs-12">
<div class="top-banner">
Hello world<br/>
Hello world<br/>
Hello world<br/>
Hello world<br/>
Hello world<br/>
Hello world<br/>
Hello world<br/>
Hello world<br/>
Hello world<br/>
Hello world<br/>
Hello world<br/>
Hello world<br/>
<hr>
</div>
</div>
</section>
</div>
</body>
</html>
演示
.导航栏标题,
.navbar品牌{
线高:100px;
高度:100px;
填充顶部:0;
}
.affix.navbar默认值{
位置:固定!重要;
顶部:0!重要;
宽度:100%!重要;
背景色:#957595!重要;
}
.粘贴{
宽度:100%!重要;
}
@媒体屏幕和屏幕(最小宽度:768px){
.导航栏标题{
左侧填充:200px;
文本对齐:居中;
}
}
.顶旗{
背景色:#b0c4de;
背景图片:url(“bi-uk-office7-2.jpg”);
背景重复:无重复;
背景位置:右上角;
}
切换导航
你好,世界
你好,世界
你好,世界
你好,世界
你好,世界
你好,世界
你好,世界
你好,世界
你好,世界
你好,世界
你好,世界
你好,世界
将z-index
添加到您的#nav
中,如下所示,使其位于顶部,并将边距左侧
属性添加到同一位置,以保持最左侧,因为它从其父容器流体中获得填充物
#nav
{
z-index:1000;
margin-left: -15px;
}