position:sticky与bottom:0不生效，如何实现导航栏先吸底后滚动吸顶

不生效的核心原因 #

• 粘性定位position: sticky的阈值设置错误：你设置了bottom: 0，只会在元素滚动到距离视口底部小于等于0时触发粘性效果，完全不符合“固定在视口顶部”的需求。
• 没有配置初始位置规则：当前没有样式让.basehead默认停靠在父元素.header的底部。
• 父元素额外设置的position: relative无意义，也不会辅助粘性定位生效。

修复代码 #

基础修复（在.header范围内实现需求） #

如果你需要.basehead初始在.header底部，且滚动到顶时粘在视口顶部，直到整个.header滚出视口后跟随消失，修改代码如下：

/* Parent Element */
.header{
    height: 500px;
    background-color: #e260b1;
}
/* Element to be stiked at bottom of parent element */
.basehead{
    width: 100%;
    background: #333333;
    height: 60px;
    position: sticky;
    top: 0px;
    /* 父元素高度500px减去自身高度60px，刚好把元素挤到父元素底部 */
    margin-top: 440px;
}

全程粘顶优化 #

如果你需要导航栏滚动全程都固定在视口顶部，只需要把.basehead元素从.header容器中挪出来，作为body的直接子元素即可，CSS规则和上面一致。

注意事项 #

position: sticky的粘性作用范围仅限它的直接父元素内部，父元素滚动出视口后，粘性元素也会跟随父元素一起消失。

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