Question

我目前正在一个项目网站上工作，并且是一页纸的网站，而且我是Bootstrap 3的新手，所以我仍在使用一些启动模板。我现在遇到的问题是我不知道如何放置客户想要的有效但复杂的汉堡菜单：

当用户位于主页或页眉/轮播上时，汉堡菜单应该单独位于屏幕右上方的透明导航背景中（而不是边缘）。
当您向下滚动一点时，标题中的标题汉堡菜单应该隐藏或只是向上固定。
在标题后向下滚动时，预期的黑色导航栏应出现，固定在顶部，该导航栏应较早扩展小导航栏，然后变为全屏100％宽度的栏，并在右侧和左侧显示汉堡菜单徽标在左侧。
单击汉堡菜单时，应在屏幕右侧显示一个导航框。

这是我的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模板，并且可以尽快编辑它而不会弄乱所有内容。

Answer 1

我认为您需要的是带有一些滚动效果的侧边栏。您将必须使用一些javaScript来实现此目的。我不知道具体如何完成的细节，但是我可以为您提供一些资源来帮助您实现目标。

使用汉堡菜单制作透明的导航栏。（代码如下）

.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
添加滚动效果。请参阅代码笔上的此代码。 https://codepen.io/sonorangirl/pen/XmRBjq

我确定您可以结合以上所有步骤来实现所需的功能。祝一切顺利！

用户向下滚动时扩展和更改导航栏

1 个答案: