Javascript 在引导程序4中制作一个固定的导航栏和侧栏？

我正在使用HTML、Javascript、引导和CSS为我们的系统创建导航栏和侧栏。我只想让导航栏和边栏固定，即使用户向下滚动页面。而且反应灵敏。在不改变导航栏和侧边栏的设计的情况下，我如何做到这一点？有人能帮我解决使用引导的问题吗？这是我的护照

原始设计

当我放置固定顶部和自定义CSS时的问题

隐藏菜单

使用引导类和自定义css

$（“#菜单切换”）。单击（功能（e）{
e、 预防默认值（）；
$（“#包装器”）.toggleClass（“toggled”）；
如果（e.target.innerText==“显示菜单”）{
e、 target.innerText=“隐藏菜单”；
}否则{
e、 target.innerText=“显示菜单”；
}
});
正文{
身高：100%；
溢出x：隐藏；
字体系列：无衬线；
}
#标志{
宽度：160px；
高度：150像素；
边界半径：50%；
}
#边栏包装{
最小高度：100vh；
左边距：-15雷姆；
-webkit过渡：边距.25s放松；
-moz过渡：边距0.25秒放松；
-o型过渡：边缘。25秒放松；
过渡：边缘。25秒放松；
}
#边栏包装。边栏标题{
填充：0.875雷姆1.25雷姆；
字号：1.2rem；
}
#侧栏包装器。列表组{
宽度：15雷姆；
}
#页面内容包装器{
最小宽度：100vw；
}
#wrapper.toggled#侧栏包装器{
左边距：0；
}
navbar先生{
背景：线性渐变（右上角，#0084ff，#0084ff）；
/*位置：固定*/
}
@介质（最小宽度：768px）{
#边栏包装{
左边距：0；
}
#页面内容包装器{
最小宽度：0；
宽度：100%；
}
#wrapper.toggled#侧栏包装器{
左边距：-15雷姆；
}
}
#边栏包装{
位置：固定；
}
#页面内容包装器{
填充顶部：57px；
}
#页面内容包装器，
#页面内容包装器>.navbar{
-webkit过渡：所有.25秒都可以轻松完成；
-moz过渡：所有.25秒都放松；
-o型过渡：所有0.25秒缓解；
过渡期：所有.25秒放松；
}
#wrapper.toggled#页面内容包装器>.navbar{
左：15rem；
}
#wrapper.toggled#页面内容包装器{
左边距：15雷姆；
}

隐藏菜单






知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车
这是一种不受欢迎的行为，它是一种不受欢迎的行为。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。

Lorem ipsum door sit amet，一位杰出的领导者，他是一位临时劳工和大股东。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车
我的心在我的心上，我的心在我的心上。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。

Lorem ipsum door sit amet，一位杰出的领导者，他是一位临时劳工和大股东。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车
我的心在我的心上，我的心在我的心上。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
为什么导航栏会粘在侧栏顶部的侧栏上，而段落会在侧栏下调整？你可以看到上面的图片
<div class="d-flex" id="wrapper">
  <div class="bg-light border-right" id="sidebar-wrapper">
    <div class="sidebar-heading"><a href="#" class="navbar-left text-dark"><img class="mx-auto d-block" src="../images/logo.jpg" id="logo"></a></div>

    <div class="list-group list-group-flush">
    <a href="<?php echo url_for('admin/index.php')?>" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold"><i class="fas fa-tachometer-alt"></i>Dashboard</a>

    <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">User</a>

    <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Supplier</a>

    <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Purchase Order</a>

    <a href="#" class="list-group-item list-group-item-action bg-light text-dark font-weight-bold">Reports</a>

    </div>
  </div>
  <!-- /#sidebar-wrapper -->

  <!-- Page Content -->
  <div id="page-content-wrapper">

  <nav class="navbar navbar-expand-lg navbar-light bg-success border-bottom">
    <button class="btn btn-outline-light btn-sm" id="menu-toggle">Hide Menu</button>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
        <li class="nav-item active">
          <a class="nav-link text-light" href=""><i class="fas fa-home"></i> Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-light"><i class="fas fa-building"></i> Contact</a>
        </li>
        <li class="nav-item dropdown">
          <a class="btn nav-link dropdown-toggle text-light" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user"></i> John Doe
          </a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">See Profile</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Logout</a>
          </div>
        </li>
      </ul>
    </div>
  </nav>