我目前正在一个元素网站上工作，它是一个单页网站，我是 Bootstrap 3 的新手，所以我仍在使用一些启动模板。我现在遇到的问题是我不知道如何放置客户想要的有效但复杂的汉堡包菜单:
- 当用户在主页或页眉/旋转木马上时，汉堡菜单单独应该位于屏幕右上角的透明导航背景上(而不是在边缘)。
- 当您向下滚动一点时，标题中的这个标题汉堡菜单应该隐藏或固定在上面。
- 当您在标题后向下滚动时，预期的黑色导航栏应该出现，固定在顶部，它应该更早地扩展小导航栏然后变成全屏 100% 宽度的栏，右侧有汉堡菜单和公司左侧的 Logo 。
- 单击汉堡菜单时，屏幕右侧应出现一个导航框。
这是我的 HTML:
<a id="menu-toggle" href="#" class="btn btn-primary btn-lg toggle"><i class="fa fa-bars"></i></a>
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<a id="menu-close" href="#" class="btn btn-default btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
<li class="sidebar-brand">Navigation</a></li>
<li><a href="#top">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Works</a></li>
<li><a href="#portfolio">People</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
我目前正在使用 Bootstrap 3 标准模板，因为我想在迁移到 4 之前了解更多关于它的信息。这是我的 CSS:
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.428571429;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn-primary {
color: #fff;
background-color: #428bca;
border-color: #357ebd;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
color: #fff;
background-color: #3276b1;
border-color: #285e8e;
}
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
background-color: #428bca;
border-color: #357ebd;
}
.btn-primary .badge {
color: #428bca;
background-color: #fff;
}
这就是我现在为菜单所做的全部工作。我本来想为这些东西创建新的类，这样我就不会依赖 Bootstrap 模板，我可以尽快编辑它而不会搞砸。
最佳答案
我认为您需要的是带有滚动效果的侧边栏。您将不得不使用一些 javaScript 来实现这一点。我不知 Prop 体是如何完成的细节，但我可以为您提供一些资源，帮助您实现这一目标。
- 制作带有汉堡菜单的透明导航栏。 (代码如下)
.navcolor{
background-color:rgba(0,0,0,0);
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<body>
<nav class="navbar navbar-light navcolor mb-3">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">People</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</body>创建侧边栏。按照这篇博文来实现这一目标 https://bootstrapious.com/p/bootstrap-sidebar
添加滚动效果。在 codepen 上查看此代码。 https://codepen.io/sonorangirl/pen/XmRBjq
我相信您可以结合上述所有步骤来实现您想要的。一切顺利!
关于css - 用户向下滚动时扩展和更改导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51736515/