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

这篇文章发布于 2022年04月22日,星期五,14:28,归类于 CSS相关。 阅读 3673 次, 今日 1 次 6 条评论

 

猫与花

一、先看下效果

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

学会了么?

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

(本篇完)

分享到:


发表评论(目前6 条评论)

  1. Spider-Man说道:

    为啥我的完全一模一样没反应的

  2. lyj说道:

    6得飞起,我一直用js。。

  3. 了了君说道:

    赞👍

  4. Apisit说道:

    666啊