position sticky失效时，如何实现导航栏左侧固定？

1. 导航栏高度设置导致sticky无法触发 #

你给导航栏设置了height: 100vh，这意味着它的高度完全等于视口高度。position: sticky的生效逻辑是：当元素即将被滚动出视口范围时，才会固定在指定位置。如果元素本身已经占满整个视口高度，无论页面如何滚动，它都不会被移出视口，自然不会触发sticky的固定效果。

解决方法：

• 移除height: 100vh，改为设置合适的最小高度或让内容撑开高度；
• 如果需要导航栏占满左侧垂直空间，改用position: fixed代替sticky（fixed是相对于视口固定，更适合左侧固定的场景）。

2. 滚动容器与定位参考的冲突 #

即使移除了父元素.App的overflow-y: scroll，祖父元素html设置了overflow-y: scroll，此时滚动容器是html。但你的.App设置了margin: 0 auto，属于居中布局，导航栏作为.App的子元素，left: 0是相对于.App的边界而非视口边界。这会导致导航栏只能固定在.App的左侧，而非你期望的视口左侧。

解决方法：

• 如果要固定在视口左侧，将导航栏从.App中移出，作为body或html的直接子元素；
• 改用position: fixed，并设置left: 0、top: 0、height: 100vh，直接相对于视口固定。

3. 媒体查询是否正确触发 #

检查@include query(laptop)这个混合宏对应的媒体查询规则是否正确，比如断点宽度是否符合你的“laptop”定义（比如min-width: 1024px这类合理条件）。如果媒体查询未触发，内部的所有样式都不会生效。

4. 父元素的布局限制 #

如果.App是块级容器，导航栏作为其子元素，position: sticky的行为可能被父元素的width限制。比如.App设置了最大宽度，导航栏的left: 0无法突破父元素的边界，导致看起来没生效。

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