javascript - 带有顶部、底部和溢出的侧边导航

Question

我正在尝试创建一个带有顶部和底部的侧面导航。当窗口高度缩小时，我希望底部导航与顶部重叠并且顶部导航具有滚动功能。我添加了一些 CSS 渐变来帮助向用户指示元素已溢出，但我想要一个滚动条。我只想要内容溢出时的滚动条(可能需要 JS，但我可能是错的)。

感谢帮助

Fiddle here 、HTML 和 CSS 如下。

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #fff;
}

html,
body,
.pane-sidebar {
  height: 100%;
}

.pane-sidebar {
  background-color: #456081;
  position: relative;
  text-align: center;
  width: 75px;
}

.full-height,
.k-splitter.full-height {
  height: 100%;
  padding: 0;
  margin: 0;
}

.pane-sidebar .sidebar-menu-wrapper {
  padding: 1.25rem 0;
  min-height: 40rem;
  overflow: auto;
}

.pane-sidebar .brand {
  padding: 0;
  margin: 0;
  font-weight: normal;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 0.875rem;
  color: #ffffff;
}

.pane-sidebar ul.primary {
  min-height: 26.25rem;
}

.pane-sidebar ul {
  list-style: none;
  margin: 0;
  padding: 2rem 0;
  text-align: center;
}

.pane-sidebar ul li {
  padding-bottom: 1.5rem;
}

.pane-sidebar ul li.secondary {
  padding-bottom: 0.625rem;
}

.pane-sidebar ul li.secondary a,
.pane-sidebar ul li.secondary button {
  font-size: 1.125rem;
}

.pane-sidebar ul li a {
  font-size: 2rem;
  color: #ffffff;
  text-decoration: none;
  display: block;
}

.pane-sidebar ul li.secondary a span {
  font-size: 0.625rem;
}

.pane-sidebar ul li a span {
  font-size: 0.75rem;
  color: #ffffff;
  display: block;
}

.pane-sidebar ul.secondary {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 4rem;
  margin-left: -2rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #456081 15%, #456081 100%);
}

.pane-sidebar ul li.secondary a,
.pane-sidebar ul li.secondary button {
  font-size: 1.125rem;
}

button {
  background-color: transparent;
  border: 0 none;
}

.pane-sidebar .show-errors {
  cursor: pointer;
}

button {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  overflow: visible;
  text-transform: none;
  background-color: #4b708b;
  color: #fff;
  padding: 0.25rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<div class="pane-sidebar full-height">
  <div class="sidebar-menu-wrapper">
    <h1 class="brand">Brand</h1>
    <ul class="primary">
      <li>
        <a href="#">
          <i class="far fa-sticky-note"></i>
          <span>Top</span>
        </a>
      </li>
      <li class="secondary">
        <a href="#">
          <i class="far fa-sticky-note"></i>
          <span>Top</span>
        </a>
      </li>
      <li class="secondary">
        <a href="#">
          <i class="far fa-sticky-note"></i>
          <span>Top</span>
        </a>
      </li>
      <li class="secondary">
        <a href="#">
          <i class="far fa-sticky-note"></i>
          <span>Top</span>
        </a>
      </li>
      <li class="secondary">
        <a href="#">
          <i class="far fa-sticky-note"></i>
          <span>Top</span>
        </a>
      </li>
      <li class="secondary">
        <a href="#">
          <i class="far fa-sticky-note"></i>
          <span>Top</span>
        </a>
      </li>
      <li class="secondary">
        <a href="#">
          <i class="far fa-sticky-note"></i>
          <span>Top</span>
        </a>
      </li>
    </ul>
    <ul class="secondary">
      <li class="secondary">
        <button class="show-errors" type="button">
          <i class="far fa-bell"></i>
        </span>
      </button>
    </li>
    <li class="secondary">
      <a href="#">
        <i class="fas fa-box"></i>
        <span>Bottom</span>
      </a>
    </li>
  </ul>
</div>

Answer 1

您可以在菜单包装器上使用 Flexbox。然后让你的主元素填充额外的空间并显示滚动条:

.sidebar-menu-wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;      
}
.primary {
   flex: 1;
   overflow-y: auto;
}

这是一个 fiddle :https://jsfiddle.net/mehg8uL2/