我认为@khilley 关于使用标准 Bootstrap 标记和内置 javascript 组件提出了一个特别有效的观点。以下是一些原因：
- 您当前的方法使用重复标记（用于您的菜单）。它不是 DRY 或可访问的，需要更多的维护工作。
- 如果您不需要编写自己的 javascript，则可以节省开发和测试时间，并为您的用户节省几个下载字节。
- Twitter Bootstrap 被用于数百万个网站，因此每天都有数百万人在全球数百万种不同的设备/操作系统/分辨率组合上进行现场测试。当您使用标准标记和 javascript 组件插件时，您会受益于知道它会正常工作。
更重要的是，您可以通过一些样式轻松重现导航的所有行为，包括使用内置的词缀标记来处理导航栏中的更改。好甜！
只需对您的标记和 css 进行少量更改即可完成此操作。您现在可以消除所有自定义 javascript，除了用于滚动到不同部分的一键式处理程序。
将所有导航样式和标记替换为以下内容：
HTML：
<nav class="navbar nav-custom navbar-fixed-top" data-spy="affix" data-offset-top="80" role="navigation">
<div class="container-fluid">
<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="glyphicon glyphicon-th-list"></span>
</button>
<span class="rc">RC</span>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a href="#home">Home</a>
</li>
<li>
<a href="#design">Design</a>
</li>
<li>
<a href="#develop">Develop</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS：
.nav-custom {
width: 100%;
height: 80px;
z-index: 999;
padding: 25px;
background-color: #f87f73;
border-bottom: 1px solid rgba(0, 0, 0, 0.18);
font-size: 150%;
color: #fff;
-webkit-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
.nav-custom.affix {
width: 100%;
background-color: rgba(255, 255, 255, 1);
color: #f87f73;
height: 60px;
padding: 14px;
-webkit-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
.nav-custom .rc {
background-color: #fff;
color: #f87f73;
padding: 5px;
border-radius: 50% 0% 50% 0%;
float: none;
}
.nav-custom.affix .rc {
background-color: #f87f73;
color: #fff;
}
.nav-custom.affix .navbar-collapse {
top: 60px;
}
.nav>li>a:hover, .nav>li>a:focus {
background-color: transparent;
}
button{
outline: none;
}
.navbar-toggle {
padding: 0;
margin: 0;
}
@media (min-width: 768px) {
.nav-custom a::before,
.nav-custom a::after {
display: inline-block;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
-moz-transition: -moz-transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s;
}
.nav-custom a::before {
margin-right: 10px;
content: '[';
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
transform: translateX(20px);
}
.nav-custom a::after {
margin-left: 10px;
content: ']';
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
transform: translateX(-20px);
}
.nav-custom a:hover::before,
.nav-custom a:hover::after,
.nav-custom a:focus::before,
.nav-custom a:focus::after {
opacity: 1;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
transform: translateX(0px);
}
.nav-custom a:link, .nav-custom a:visited, .nav-custom a:hover, .nav-custom a:active {
text-decoration: none;
color: #fff;
outline: none;
}
.nav-custom.affix a:link, .nav-custom.affix a:visited, .nav-custom.affix a:hover, .nav-custom.affix a:active {
text-decoration: none;
color: #f87f73;
outline: none;
}
}
@media (max-width: 767px) {
.navbar-collapse {
width: 250px;
position: fixed;
right: -250px;
top: 80px;
overflow-x: hidden;
background-color: rgba(255, 255, 255, 0.8);
border-top: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
.navbar-collapse.in {
right: 0px;
width: 250px;
-webkit-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
.navbar-collapse.collapsing {
height: auto !important;
}
.navbar-nav {
margin: 0 -15px;
}
.navbar-nav>li>a {
padding: 0;
line-height: 3em;
text-align: center;
}
.navbar-collapse ul {
border-left: 1px solid rgba(0, 0, 0, .18);
}
.navbar-collapse ul li {
border-bottom: 1px solid rgba(0, 0, 0, .18);
}
.navbar-collapse ul li:hover {
background-color: #f87f73;
color: #fff;
-webkit-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
.navbar-collapse ul a:link,
.navbar-collapse ul a:visited {
color: #f87f73;
}
.navbar ul a:hover {
text-decoration: none;
color: #fff;
}
}
工作原理：
- 使用 navbar-fixed-top 类代替自定义样式。
- 您可以使用 Bootstrap Affix，而不是编写自己的 javascript 来处理滚动时更改导航栏。这个内置的 javascript 插件可以使用 data-offset-top 属性来设置词缀类自动附加到设置了 data-spy 属性的元素的点。使用 data 属性，您不需要一行 javascript，只需添加样式，以便在应用
affix 类后您希望元素的外观。现在您的所有样式都在您的 CSS 中，而无需在您的 javascript 中。
- 使用内置 navbar-toggle，它使用内置 Bootstrap Collapse 插件在移动导航之间进行切换。这消除了编写/测试/维护您自己的 javascript 的需要，并消除了您对菜单的重复标记。当菜单展开时，折叠插件会将
in 类应用于具有折叠类的元素，因此您可以使用它来设置菜单样式。
- 使用媒体查询根据视口大小更改菜单布局。 “移动”菜单仅在小于 767 像素的视口中显示，因此您可以轻松确定移动菜单的样式。
总体而言，CSS 与您的 CSS 几乎相同，我只是更改了选择器以反映标记中的更改。除了一些小的调整之外，它几乎是从您的网站上剪切和粘贴的。