为什么导航栏设置position:sticky属性后无法正常生效？

失效原因 #

你的.header__div-nav元素设置sticky不生效的核心原因是它的直接父元素<header id="header">的高度和自身高度完全一致。
sticky定位的生效逻辑是：元素会跟随正常文档流滚动，直到它的边缘碰到视口的指定边界（你这里设置的是top:0即视口顶部），之后会固定在该位置，直到它的父元素整体滚出视口，才会跟着父元素一起离开视口。
你当前的<header>标签里只包含了这一个导航元素，高度和导航完全相等，当页面滚动到导航顶部碰到视口顶部时，<header>的底部也刚好开始离开视口，导航直接跟着父元素一起滚走了，自然看不到固定效果。

解决方案 #

方案1（推荐）：直接给父级header设置sticky

导航本身就是header的唯一内容，直接把sticky属性加在header上，它的父元素是高度足够的body，就可以正常生效，修改CSS如下：

#header {
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100%;
}
/* 保留.header__div-nav的其他样式，去掉它的position、top、z-index属性即可 */

方案2：保留sticky在导航div上，确认父元素属性

如果你一定要把sticky加在.header__div-nav上，需要同时满足两个条件：

• 所有父级元素（这里指header和body）不能设置overflow: hidden、overflow: auto、overflow: scroll属性
• 父元素header的高度要大于导航元素的高度，给sticky留出滚动固定的空间

额外验证方法 #

如果修改后还是看不到效果，可以给<main>标签临时加一个很高的高度测试滚动效果，确认是不是页面内容不足导致无法滚动：

#main {
  height: 2000px;
}

内容的提问来源于stack exchange，提问作者Alejandro Sánchez