LOGO

双 sticky 头部标题导航高度自动伸缩实现

文章内容 by zhangxinxu...

代码示意：

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

body {
    --height-outer: 120px;
    --height-inner: 60px;

    background-color: #eee;
    margin: 0;
}
header {
    display: flex;
    align-items: center;
    position: sticky;
    height: var(--height-outer);
    top: calc(var(--height-inner) - var(--height-outer));
    border-bottom: 1px solid #ccc;
    background-color: #fff;
}
header-inner {
    display: flex;
    line-height: var(--height-inner);
    width: 980px;
    max-width: calc(100% - 2rem);
    margin: 0 auto;
    justify-content: space-between;
    position: sticky;
    top: 0; 
}