Twitter-Bootstrap 3折叠的Navbar与标题重叠

Question

因此，我有一个导航栏，该导航栏是固定的，但是当用户滚动浏览网页时会变得发粘。 我的问题是，每当我调整浏览器的大小时，导航栏就会与我的副标题（带有“ The Official Student Publication ..”的副标题）重叠。

网络快照http://i.stack.imgur.com/rIxqo.png

索引的HTML代码

 $('#nav').affix({ offset: { top: $('header').height() } }); 

 /* bootstrap 3 helpers */ .navbar-form input, .form-inline input { width:auto; position: absolute; } header { height:160px; } #nav.affix { position: fixed; top: 0; width: 100%; z-index:10; } /* Create a medium height at 40px */ .navbar-md {min-height:40px} .navbar-md .navbar-brand, .navbar-md .navbar-nav>li>a {padding-top:10px; padding-bottom:10px} .navbar-md .navbar-brand {height: 40px} .navbar-md .navbar-toggle {margin: 6px 12px 6px 0px; padding: 6px 7px 6px 7px;} .navbar-md .navbar-toggle .icon-bar {width: 19px;} .container#slider { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .container#headerC { padding:15px; } /* RESPONSIVE HEADER*/ .navbar-header { background-image:url("bootstraplogo.png", "bootstraplogoslice1.png") background-repeat:no-repeat, repeat-x; background-position:center; } @media only screen and (min-width: 479px) and (max-width: 991px) { body { padding-top: 100px; } .navbar-header { background-size: auto auto; } .navbar-header { height: 45px; } } @media only screen and (max-width: 479px) { .navbar-header { background-size: auto 50px, 1px 50px; } .navbar-md#header { height:50px; } } /* RESPONSIVE HEADER*/ .container-header { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } .text-center { text-align: center; } p#headerP { display: inherit; padding: 30px 0 10px; text-align: center; text-shadow: 1px 1px 2px #76141D; font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 5em; font-weight: 700; line-height: normal; color: #8F1925; } p#subheader { display: inherit; margin: 0; margin-bottom: 50px; padding: 0 0 40px; text-align: center; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); text-transform: uppercase; font-size: 1.25em; font-weight: 400; letter-spacing: 3px; color: #E72635; } body { font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; background-color: #FEFDFD; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; padding-top: 10px; } header { height: 200px; } h1, h2, h3, h4, h5, h6 { text-transform: uppercase; font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 700; letter-spacing: 1px; } p { font-size: 1.25em; line-height: 1.6; color: #000; } hr { max-width: 400px; border-color: #999999; } .brand, .address-bar { display: none; } .navbar-brand { text-transform: uppercase; font-weight: 900; letter-spacing: 2px; padding: 10px; } .navbar-nav { text-transform: uppercase; font-weight: 400; letter-spacing: 3px; } .img-full { min-width: 100%; } .brand-before, .brand-name { text-transform: capitalize; } .brand-before { margin: 15px 0; } .brand-name { margin: 0; font-size: 4em; } .tagline-divider { margin: 15px auto 3px; max-width: 250px; border-color: #999999; } .box { margin-bottom: 20px; padding: 30px 15px; background: #fff; background: rgba(255,255,255,0.9); } .intro-text { text-transform: uppercase; font-size: 1.25em; font-weight: 400; letter-spacing: 1px; } .img-border { float: none; margin: 0 auto 0; border: #999999 solid 1px; } .img-left { float: none; margin: 0 auto 0; } footer { background: #fff; background: rgba(255,255,255,0.9); } footer p { margin: 0; padding: 50px 0; } @media screen and (min-width:768px) { .brand { display: inherit; margin: 0; padding: 30px 0 10px; text-align: center; text-shadow: 1px 1px 2px #76141D; font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 5em; font-weight: 700; line-height: normal; color: #8F1925; } .top-divider { margin-top: 0; } .img-left { float: left; margin-right: 25px; } .address-bar { display: inherit; margin: 0; padding: 0 0 40px; text-align: center; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); text-transform: uppercase; font-size: 1.25em; font-weight: 400; letter-spacing: 3px; color: #E72635; } .navbar { border-radius: 0; } .navbar-header { display: none; } .navbar { min-height: 0; } .navbar-default { border: none; background: #fff; background: rgba(255,255,255,0.9); } .nav>li>a { padding: 35px; } .navbar-nav>li>a { line-height: normal; } .navbar-nav { display: table; float: left; table-layout: fixed; font-size: 1.25em; } } @media screen and (min-width:1200px) { .box:after { content: ''; display: table; clear: both; } } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="container" id="headerC"> <div class="text-center"> <header class="masthead"> <p id="headerP">The University Digest</p> <p id="subheader">The Official Student Publication of Western Mindanao State University</p> </header> </div> </div> <!-- Navigation --> <div id="nav"> <div class=" navbar-custom navbar navbar-inverse navbar-md"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand " href="#">Menu</a> </div> <div class="navbar-collapse collapse navbar-inverse-collapse navbar-md"> <ul class="nav navbar-nav "> <li><a href="#">Home</a></li> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Articles <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Article</a></li> <li><a href="#">Comics</a></li> <li><a href="#">Editorial Cartoon</a></li> <li><a href="#">Uncensored</a></li> </ul> </li> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Publications<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Newsletters</a></li> <li><a href="#">Magazine</a></li> <li><a href="#">Tejido</a></li> </ul> <li><a href="#">Applications</a></li> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">The Staff<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Editorial Board</a></li> <li><a href="#">By-Laws</a></li> <li><a href="#">Contacts</a></li> </ul> <li><a href="#">WMSU Portal</a></li> <li><a href="#">Log In</a></li> </ul> </li> </ul> </div> </div> </div> 

Answer 1

删除标题的高度

header {
  height: 200px;
}

header {
  height: 160px;
}

由于height ， nav正重叠在header

 $('#nav').affix({ offset: { top: $('header').height() } }); 

 /* bootstrap 3 helpers */ .navbar-form input, .form-inline input { width: auto; position: absolute; } #nav.affix { position: fixed; top: 0; width: 100%; z-index: 10; } /* Create a medium height at 40px */ .navbar-md { min-height: 40px } .navbar-md .navbar-brand, .navbar-md .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px } .navbar-md .navbar-brand { height: 40px } .navbar-md .navbar-toggle { margin: 6px 12px 6px 0px; padding: 6px 7px 6px 7px; } .navbar-md .navbar-toggle .icon-bar { width: 19px; } .container#slider { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .container#headerC { padding: 15px; } /* RESPONSIVE HEADER*/ .navbar-header { background-image: url("bootstraplogo.png", "bootstraplogoslice1.png") background-repeat: no-repeat, repeat-x; background-position: center; } @media only screen and (min-width: 479px) and (max-width: 991px) { body { padding-top: 100px; } .navbar-header { background-size: auto auto; } .navbar-header { height: 45px; } } @media only screen and (max-width: 479px) { .navbar-header { background-size: auto 50px, 1px 50px; } .navbar-md#header { height: 50px; } } /* RESPONSIVE HEADER*/ .container-header { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } .text-center { text-align: center; } p#headerP { display: inherit; padding: 30px 0 10px; text-align: center; text-shadow: 1px 1px 2px #76141D; font-family: "Josefin Slab", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 5em; font-weight: 700; line-height: normal; color: #8F1925; } p#subheader { display: inherit; margin: 0; margin-bottom: 50px; padding: 0 0 40px; text-align: center; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); text-transform: uppercase; font-size: 1.25em; font-weight: 400; letter-spacing: 3px; color: #E72635; } body { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #FEFDFD; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; padding-top: 10px; } h1, h2, h3, h4, h5, h6 { text-transform: uppercase; font-family: "Josefin Slab", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; letter-spacing: 1px; } p { font-size: 1.25em; line-height: 1.6; color: #000; } hr { max-width: 400px; border-color: #999999; } .brand, .address-bar { display: none; } .navbar-brand { text-transform: uppercase; font-weight: 900; letter-spacing: 2px; padding: 10px; } .navbar-nav { text-transform: uppercase; font-weight: 400; letter-spacing: 3px; } .img-full { min-width: 100%; } .brand-before, .brand-name { text-transform: capitalize; } .brand-before { margin: 15px 0; } .brand-name { margin: 0; font-size: 4em; } .tagline-divider { margin: 15px auto 3px; max-width: 250px; border-color: #999999; } .box { margin-bottom: 20px; padding: 30px 15px; background: #fff; background: rgba(255, 255, 255, 0.9); } .intro-text { text-transform: uppercase; font-size: 1.25em; font-weight: 400; letter-spacing: 1px; } .img-border { float: none; margin: 0 auto 0; border: #999999 solid 1px; } .img-left { float: none; margin: 0 auto 0; } footer { background: #fff; background: rgba(255, 255, 255, 0.9); } footer p { margin: 0; padding: 50px 0; } @media screen and (min-width: 768px) { .brand { display: inherit; margin: 0; padding: 30px 0 10px; text-align: center; text-shadow: 1px 1px 2px #76141D; font-family: "Josefin Slab", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 5em; font-weight: 700; line-height: normal; color: #8F1925; } .top-divider { margin-top: 0; } .img-left { float: left; margin-right: 25px; } .address-bar { display: inherit; margin: 0; padding: 0 0 40px; text-align: center; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); text-transform: uppercase; font-size: 1.25em; font-weight: 400; letter-spacing: 3px; color: #E72635; } .navbar { border-radius: 0; } .navbar-header { display: none; } .navbar { min-height: 0; } .navbar-default { border: none; background: #fff; background: rgba(255, 255, 255, 0.9); } .nav>li>a { padding: 35px; } .navbar-nav>li>a { line-height: normal; } .navbar-nav { display: table; float: left; table-layout: fixed; font-size: 1.25em; } } @media screen and (min-width: 1200px) { .box:after { content: ''; display: table; clear: both; } } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="container" id="headerC"> <div class="text-center"> <header class="masthead"> <p id="headerP">The University Digest</p> <p id="subheader">The Official Student Publication of Western Mindanao State University</p> </header> </div> </div> <!-- Navigation --> <div id="nav"> <div class=" navbar-custom navbar navbar-inverse navbar-md"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand " href="#">Menu</a> </div> <div class="navbar-collapse collapse navbar-inverse-collapse navbar-md"> <ul class="nav navbar-nav "> <li><a href="#">Home</a> </li> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Articles <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Article</a> </li> <li><a href="#">Comics</a> </li> <li><a href="#">Editorial Cartoon</a> </li> <li><a href="#">Uncensored</a> </li> </ul> </li> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Publications<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Newsletters</a> </li> <li><a href="#">Magazine</a> </li> <li><a href="#">Tejido</a> </li> </ul> <li><a href="#">Applications</a> </li> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">The Staff<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Editorial Board</a> </li> <li><a href="#">By-Laws</a> </li> <li><a href="#">Contacts</a> </li> </ul> <li><a href="#">WMSU Portal</a> </li> <li><a href="#">Log In</a> </li> </ul> </li> </ul> </div> </div> </div>