CSS | ページのスクロールを監視する効果を実現するにはどうすればよいですか?

Web ページでは、階層関係、特にトップナビゲーションを強調するために影がよく使用されますが、デザインによっては最初に影を表示する必要がなく、スクロールした後にのみ表示される場合があります。たとえば、次の例では、頭の影に注目してください。

ライターズゾーン

ご覧のとおり、影はスクロール後にのみ表示されます。通常は、JS を使用してスクロールイベントをリッスンし、クラス名を動的に追加することでこれを実現できますが、いくつか試した結果、CSS だけを使用してこの効果を簡単に実現できることがわかりました。実装効果は次のとおりです。

効果を達成する

1. ヘッドの位置を固定

このようなレイアウトがあるとします

<header>LOGO</header>
<main>很多内容文本</main>

簡単な改造

header {
    
    
    background: #fff;
    font-size: 20px;
    padding: 10px;
}

ヘッドを固定して位置を決める方法はたくさんありますが、最も一般的なのは固定位置を使用する方法です。

header {
    
    
    position: fixed;
    top: 0;
}

ただし、固定配置はスペースを占有せず、コンテンツ領域をブロックするため、通常は次のようにヘッドスペースの一部を予約する必要があります。

main {
    
    
	margin-top: 头部的高度
}

ここでは、天井を吸収しながら元のプレースホルダーを保持できるスティッキー配置を使用することをお勧めします。

header {
    
    
	position: sticky;
	top: 0
}

効果は以下の通りですが、影がありません。

固定ヘッド位置

2、CSS実装原則

この効果を実現するには、少し「CSS ブラインドネス」が必要です。デフォルトで要素によってブロックされているシャドウのレイヤーがあるとします。これを以下で「オクルーダー」と呼びます。ここで各部品の階層関係を考慮する必要があり、下図のように少し複雑になります（側面の階層関係図）。

上下関係

层级关系为：头部 > 遮挡物 > 阴影 > 内容

スクロールプロセス中に、影が自動的に表示され、オクルージョンが頭で覆われます。オクルージョンとコンテンツが一緒にスクロールすることに注意してください。動的なデモンストレーションは次のとおりです。

階層関係のローリング原理

これが原理ですが、以下では具体的な実装を見ていきましょう。

3、CSS 固有の実装

上記の原理に基づいて、ここに要素を追加する必要があり、擬似要素を使用してシャドウとオクルージョンを生成できます。

<header>LOGO</header>
<shadow></shadow>
<main>很多内容文本</main>

ここでの影の位置は固定されており、スペースを占有する必要がないため、固定配置を直接使用することも、デフォルトの位置が配置されていない位置にあるため、上部の値を設定する必要もありません（利点を反映しています）粘着性の)、つまり頭の下。

shadow::before {
    
    
    content: '';
    box-shadow: 0 0 10px 1px #333;
    position: fixed; /* 无需top值 */
    width: 100%;
}

fixed 定位在不设置top或者left值时，仍然位于原先位置，但是会在这个位置固定下来

オクルージョンは単色で塗りつぶすことができ、スペースを占有せずにコンテンツとともにスクロールする必要があると同時に、レベルを向上させるために絶対位置を設定することができます。

shadow::before {
    
    
    content: '';
    width: 100%;
    height: 15px;
    background: #fff;
    position: absolute; /*无需top值*/
}

absolute定位在不设置top或者left值时，仍然位于原先位置，也会跟随内容滚动。

階層関係を見てみましょう。頭、シャドウ、オクルージョンオブジェクトがすべて配置されました。この時点では、DOM の順序に従って、

层级关系为：遮挡物 > 阴影 > 头部 > 内容

頭が一番高いはずなので、別途レベルを変更する必要があります。

header {
    
    
	z-index: 1;
}

层级关系为：头部 > 遮挡物 > 阴影 > 内容

このようにして、記事の冒頭で示した効果が得られ、次のような効果が得られます。

実際の効果

4. ソフトなシャドウ

実際、上記の効果はすでに非常に優れていますが、少し硬いです。よく観察してください。ゆっくりスクロールしていると、次のように影が「上に押し上げられる」ような感じになります。

やや硬めのエフェクト

このプロセスをもう少し穏やかにする方法はありますか? 透明度の変化など？

もちろんそれは可能であり、実装は比較的簡単です。上記がかなり素っ気ない理由は、障害物が単色であるためですが、これを半透明のグラデーションに置き換えた方が良くないでしょうか。

shadow::after {
    
    
    height: 30px;
    background: linear-gradient(to bottom, #fff 50% , transparent);
}

効果は以下の通りです

ソフトな効果

このようにして、影の効果は「上向きに押す」効果ではなくなりました。どう思いますか?

ここからが本題ですよ～

以下は完全な CSS コードです (20 行未満)

header{
    
    
  position: sticky;
  background: #fff;
  top: 0;
  font-size: 20px;
  padding: 10px;
  z-index: 1;
}
shadow::before{
    
    
  content: '';
  box-shadow: 0 0 10px 1px #333;
  position: fixed;
  width: 100%;
}
shadow::after{
    
    
  content: '';
  width: 100%;
  height: 30px;
  background: linear-gradient(to bottom, #fff 50% , transparent);
  position: absolute;
}

HTMLの構造も非常にシンプルです

<header>LOGO</header>
<shadow></shadow>
<!-- <main>很多内容文本</main> -->
<main>
    <p>痛！</p>
    <p>好痛！</p>
    <p>头好痛！</p>
    <p>光怪陆离满是低语的梦境迅速支离破碎，熟睡中的周明瑞只觉得脑袋抽痛异常，仿佛被人用棒子狠狠沦了一下，不，更像是遭尖锐的物品刺入太阳穴并伴随有搅动！</p>
    <p>嘶......迷迷糊糊间，周明瑞想要翻身，想要捂头，想要坐起，可完全无法挪动双脚，身体似乎失去了控制。</p>
</main>

V. 総括と展望

上記で共有した内容は以上です。もう 1 つの CSS テクニックをマスターしましたか? 3 つの位置決め属性は、ほぼゼロのコストで使用されます。数行のコードをコピーするだけで、すぐに使用できます。実装の重要なポイントの概要は次のとおりです:

固定ヘッドレイアウトの実装にはスティッキーを使用することを推奨しており、追加の予約なしでヘッドスペースを確保できるという利点があります。
全体的な実装のアイデアは、CSS ブラインドネスと CSS レベルが相互にブロックするというものです。
固定位置は、上または左の値が設定されていない場合は元の位置のままですが、この位置に固定されます。
絶対配置で上または左の値が設定されていない場合は、元の位置のままで、コンテンツとともにスクロールします。
単色のオクルージョンはスクロールすると少し硬く、半透明のグラデーションオクルージョンはスクロールすると柔らかくなります。

将来的には、このようなスクロール関連のインタラクションは @scroll-timeline を通じて実現される可能性があり、興味のある方は事前に学習することもできますが、実際の運用で使用することはほぼ不可能です (現在、実験的な機能を使用する必要があります)。手動でオンにすること）、公式には無理です一度手を付けると計画や草案があっても何年も経つ可能性があるのでCSSを学ぶ時は思考停止してはいけませんおそらくこれが CSS の最も興味深い部分です。

この記事は主に、特に優れたクリエイターである Front-end Detectiveに寄稿したものであり、彼に特別の感謝を表したいと思います。

興味のある方は事前にこの点を知ることができますが、実際の運用で使用することはほぼ不可能です（現時点では実験的な機能を手動で有効にする必要があります）。計画や草稿があっても何年も先のことになるかもしれないので、思考と想像をやめずにCSSを学ぶのがCSSの一番面白いところかもしれません。

この記事は主に、特に優れたクリエイターである Front-end Detectiveに寄稿したものであり、彼に特別の感謝を表したいと思います。