CSS实现滚动高度自动变小的粘滞效果

一、先看下效果

如下 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，保证吸顶效果。