CSSはスクロールの高さを自動的に下げるスティッキー効果を実現します

デフォルトのページではヘッダー要素の高さがかなり高いことがわかりますが、スクロールが進むにつれてヘッダーが固定されて配置され、同時に高さが小さくなり、ページの高さに占める割合が減ります。

 HTML コードは次のとおりです。

<header>
    <div class="header-inner">
        <h1>LOGO</h1>
        <nav>
            <a href="">内容</a>
        </nav>
    </div>
</header>
<main>滚动内容</main>

CSSコード:

* {
    margin: 0;
    padding: 0;
}

body {
    --height-outer: 120px;
    --height-inner: 60px;
    background-color: #eee;
    margin: 0;
    font-family: system-ui;
}

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;
}

main {
    background-color: aliceblue;
    min-height: 2500px;
}

参考ファイルアドレス：CSSでスクロールの高さを自動的に下げるスティッキー効果を実現 « Zhang Xinxu-Xin Space-Xin Life