我使用Bootstrap 3，所以当我滚动然后将其固定到顶部时，我尝试创建一个导航栏。 我的观点中最好的解决方案是＆＃34;词缀＆＃34;从bootstrap，我用js解决这个问题
$(document).ready(function(){/* affix the navbar after scroll below header */
$('#nav').affix({
offset: {
top: $('header').height()-$('#nav').height()
}
});
});
但我有一个大问题，我的菜单有大约10个父母，每个家长李有一个孩子ul所以导航栏有一个很大的高度，我不能向下滚动导航栏，当我这样做，只是身体滚动...你能救我吗？
这里的小提琴：https://jsfiddle.net/x80cqj0c/（不漂亮，但你可以看到我的意思）
答案 0 :(得分：0)
<强> Check This DEMO
添加 css
.affix {
position: fixed;
top: 0;
width: 100%;
z-index:5;
}
@media screen and (max-width : 760px){
#men{
float:left;
width:100%;
overflow-y: auto;
height: 100px;
}
}
HTML部分
<nav class="navbar navbar-inverse affix" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-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="#">NEWS</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Parent 1</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Parent 2 <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="'">Child</a></li>
<li><a href="'">Child</a></li>
<li><a href="'">Child</a></li>
<li><a href="'">Child</a></li>
<li><a href="'">Child</a></li>
<li><a href="'">Child</a></li>
<li><a href="'">Child</a></li>
<li><a href="'">Child</a></li>
<li><a href="'">Child</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Parent 2 <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="'">Child</a></li>
<li><a href="'">Child</a></li>
<li><a href="'">Child</a></li>
<li><a href="'">Child</a></li></ul></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
VIDEOS <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">TRAILERS </a></li>
<li><a href="#">POPULAR VIDEOS </a></li>
<li><a href="#">Audio launch in US is a bad idea </a></li>
<li><a href="#">SHORTS </a></li>
<li><a href="#">OTHERS </a></li>
</ul>
</li>
<li><a href="#about">INTERVIEWS</a></li>
<li><a href="#contact">KIDS</a></li>
</ul>
</div>
</nav>
<div class="section_divider_grau"></div>
<section id="welcome_container" style="
padding-top: 60px;
">
<div class="container" id="section1">
<div class="col-md-12 normal">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
</div>
</div>
</section>