<h1>position: sticky; について。</h1>

<header>へっだぁ～（ここに「position:sticky; top:0; z-index:2;」が指定されています。）</header>

「position: sticky;」 はJavascriptに頼ることなく、このようにスクロールの一番上に行ったところで固定することができる便利なCSSです。

しかし、以前はFireFoxのみの対応でした。

現在では、chrome（ver.56以降）やEdge（ver.16以降）、OPERA（ver.43以降）でも対応されております。

「どのブラウザでも、絶対に固定表示したい！」という場合には、position: fixed;などで最初から画面上に固定しておいた方が良い場合もあります。
（IEや、古いバージョンのブラウザでは非対応の場合もありますので）

以前は、「position: sticky;」を使用する場合には、固定しなくてもよい場合（対応していたらラッキー♪）くらいの場合に使用するのがベストかも、という状態でした。

現状、IE以外のほとんどのブラウザで対応しているので、色々と面白い使い方もできそうです。

次に、<article>に「position:sticky; top:50px;」をいれてみたいと思います

<article>A</article>

<article>にも、「position:sticky; top:50px;」を仕込んでみました。

<article>B</article>

こんな動きになります。

<article>C</article>

こういう効果も、以前はJavascriptなしでは作れませんでした。

<article>D</article>

「position: sticky;」、使えそうですよね？

<article>E</article>

こういうボックスでの使い方や、<h1>～<h6>などの見出しタグに使用する方法もあります。

<article>F</article>

このCSSは、本当に楽しい使い方がいろいろとありますので・・・

<article>G</article>

ちょっと工夫をして、色々と試してみてください♪

<div class="sticky-h-box"><h2>H</h2></div>

ここからは、見出しタグ<h2>に「position: sticky; top:50px;」を仕込んでおります。

<div class="sticky-h-box"><h2>I</h2></div>

さて、どのように動くでしょうか？

<div class="sticky-h-box"><h2>J</h2></div>

見出しのみ、固定される動きになると思います。

<div class="sticky-h-box"><h2>K</h2></div>

ボックス自体はスクロールしていきますね。

<div class="sticky-h-box"><h2>L</h2></div>

ボックスがスクロールアウトすると同時に、見出しも一緒にスクロールアウトしていく感じです。

なかなか楽しい動きだと思いませんか？





























こんな風に使用することが可能です。
見出しを残しながらスクロールさせたい場合に効果的ですよね♪