by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=10316 鑫空间-鑫生活
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

一、先看下效果

如下 MP4 视频示意（不动点击播放），可以看到默认页面的 header 头部元素高度挺高的，随着滚动的进行，头部固定定位了，同时高度也变小了，减小对页面高度的占用。

眼见为实，您可以狠狠地点击这里：头部标题导航高度自动伸缩demo

如何实现的呢？

二、双 Sticky 粘性定位

需要悬浮固定的元素内外两层嵌套，假设如下HTML代码：

<header>
    <header-inner>
        ...
    </header-inner>
</header>

则核心的 CSS 是这样的：

header {
    --height-outer: 120px;
    --height-inner: 60px;
    /* by zhangxinxu */
    display: flex;
    align-items: center;
    position: sticky;
    height: var(--height-outer);
    top: calc(var(--height-inner) - var(--height-outer));
}
header-inner {
    display: flex;
    line-height: var(--height-inner);
    position: sticky;
    top: 0; 
}

就可以实现这个实用的小交互效果了。

具体实现描述如下：

外层元素粘性定位，设置 top 属性值为负的内外高度的差值，内层元素也是粘性定位，设置 top 属性值为 0，保证吸顶效果。

学会了么？

赶快在自己的项目中使用吧。

本文为原创文章，欢迎分享，勿全文转载，如果实在喜欢，可收藏，永不过期，且会及时更新知识点及修正错误，阅读体验也更好。
本文地址：https://www.zhangxinxu.com/wordpress/?p=10316

（本篇完）