如何实现滚动页面时侧边导航栏固定并占满侧边全高度

你需要修改CSS中的以下几处配置即可实现需求：

• 修正类名不匹配问题：HTML中导航标签的类为navbar，CSS中原先定义的.nav-bar命名不一致，先统一类名
• 给导航添加sticky定位配置，指定吸顶位置为顶部，同时设置高度占满视口
• 让导航内部容器继承全高，调整内部元素的排布规则，实现垂直方向占满高度

修改后完整CSS代码 #

*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/********* global styles *******/
img:not(.nav-logo) {
  width: 100%;
  display: block;
}

/* header */
.header {
  display: flex;
}

/* navbar 修正类名+添加固定和高度配置 */
.navbar {
  position: sticky;
  top: 0;
  height: 100vh;
}
.nav-wrap {
  min-width: 3rem;
  height: 100%;
  display: flex;
}

.nav-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 3.4rem;
  height: 100%;
  background: transparent;
  padding: 1rem 1rem;
  align-items: center;
}
.nav-toggle {
  background: transparent;
  border: none;
  outline: none;
  color: var(--primaryColor);
  font-size: 1.45rem;
  cursor: pointer;
  transition: var(--mainTransition);
}

.nav-toggle:hover,
.nav-link:hover {
  transform: scale(1.2);
}

.nav-links {
  height: 22.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav-link {
  background: transparent;
  border: none;
  outline: none;
  color: var(--primaryColor);
  font-size: 1.35rem;
  cursor: pointer;
  transition: var(--mainTransition);
}
/* hero */
.hero {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(hsla(0, 0%, 100%, 0), hsla(285, 83%, 60%, 0)),
    url(https://dummyimage.com/821x1082/d415d4/fff) center/cover no-repeat fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}

修改后无需调整HTML代码，向下滚动页面时侧边导航会始终固定在页面左侧，且导航高度会占满整个视口的垂直高度。

你原先的页面效果参考：

内容的提问来源于stack exchange，提问作者Atila Machan