CSSのみのスティッキーフッターを作成する方法

通常、JavaScriptが必要です。 スクロール効果を実行する Webページ上のさまざまなユーザーアクションに関連しています。スクリプトはの仕事をします ページを上下にスクロールする距離を追跡する, そして アクションを引き起こす しきい値の高さに達したとき.

スクロール効果にJavaScriptを使用することは特に悪いことではありません。実際にはもっと複雑なケースがあります JavaScriptなしでは解決できない. しかしあります CSSハック それは時々これらのスクリプトを置き換えることができます.

この投稿はあなたにhoを見せるつもりですフッターを作成するためのwは、CSSを使用しているページスクロールの効果を明らかにします. これを実証するために2つのユースケースを使用します。1つはページ全体（デモを参照）用、もう1つは記事などの個々のページ要素用です。.

全ページ

そのフッターを作成する必要があります。 ページの下から表示されます ユーザーが下にスクロールしている間また、ページをスクロールアップするときにフッターを移動する必要があります。 隠される 再びページの下に.

この目標を達成するためには、まず最初に 固定位置のフッター 画面下部に.

1.固定フッターを作成する

しましょう コンテンツとフッターを追加する 最初のページへHTMLタグを使っています