【CSS】position:sticky;で簡単固定！スティッキーヘッダー6選

どうも、ジャングルオーシャンのミケです。

今日はHTMLとCSSで簡単にできる

スティッキーヘッダーを作っていこうと思うよ。

スティッキーヘッダーとは

Webサイトは基本的に

縦の長さを固定で決めるという事はなくて

コンテンツが多くなればなるほどスクロールする長さは多くなりがちなんだ。

その時に

「ヘッダーにナビゲーションの要素がつまっていて、サイト内の回遊を促すためにもずっとユーザーの目に触れるところに置いておきたい！」

と考えることもあるはず！

その願いを叶えてくれるのがスティッキーヘッダーというわけなんだ。

具体的なイメージは用意したサンプルデモページを見てね。

サンプル1のデモページはこちら

もし、このページにあるサンプルコードを使ってもうまく実装できないという場合は、こちらの記事を確認してみてね！

固定させる方法

固定をさせるためには

CSSのpositionを使うよ。

positionにも何種類かあって

コンテンツを固定できるのはfixedとsticky。

ブラウザで表示している領域の1番上にheaderを固定させる時の

CSSの記述方法はそれぞれ↓の通り

fixedの場合は

header{
       position: fixed;/*固定する*/
       top: 0;/*ブラウザの上からの距離はゼロ*/
}

header{

position: fixed;/*固定する*/

top: 0;/*ブラウザの上からの距離はゼロ*/

}

stickyの場合は

header{
       position: sticky;/*固定する*/
       position: -webkit-sticky;/*Safari用ベンダープレフィックス*/
       top: 0;/*ブラウザの上からの距離はゼロ*/
}

header{

position: sticky;/*固定する*/

position: -webkit-sticky;/*Safari用ベンダープレフィックス*/

top: 0;/*ブラウザの上からの距離はゼロ*/

}

こういう書き方になるよ。

topというのは1番上からの距離を表しているから0をつけると1番上からの距離がゼロの位置に配置するという事になる。

ということは、position:sticky;と合わせると「1番上に固定する」という意味の記述になるよ。

もし、少し隙間をあけたければ0になっている所を10pxにすれば

10pxの隙間ができるよ。

ただ、fixedの場合、ページが読み込まれた段階で固定されてしまうから

スクロールによって、任意の場所で固定したい場合はJavaScriptと組み合わせて使うんだ。

でも、CSS3でstickyが出た事によって

JavaScriptを使わなくても追尾するコンテンツが簡単に作れるようになったんだ。

だから今回は、HTMLとCSSだけで簡単に実装できるstickyを使ったサンプルを用意したよ。

対応ブラウザについて

stickyの対応ブラウザは下記の通り

Can I useで確認する

画像は記事作成時点のものになります。

結果を見てもらったらわかると思うけど

stickyは対応していたりしていなかったりするブラウザがあるんだ。

さっきのサンプルでも書いたけど、Safari用にベンダープレフィックス-webkit-は必要だからね。

あと、IEの対応をしていないのでこの点は注意してね！

MicrosoftがIEよりEdgeの使用を推奨しているから

今後はIEの対応も気にしなくてよくなりそうだけどね。

Internet Explorerの今後について

そのことも踏まえてstickyを使うか使わないか

今の状況も合わせて決めてね。

それじゃサンプルデモいってみよう！

サンプルデモの解説

1.ヘッダーを固定

HTML

<header>
    <p>ヘッダーの記述</p>
</header>

<p>ヘッダーの記述</p>

</header>

CSS

header{
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

header{

position: sticky;

position: -webkit-sticky;

top: 0;

}

サンプル1のデモページを見る

さっき例で示したCSSと同じ記述だよ。

2.フッターを固定

HTML

<footer>
    <p>フッターの記述</p>
</footer>

<p>フッターの記述</p>

</footer>

CSS

footer{
    position: sticky;
    position: -webkit-sticky;
    bottom: 0;
}

footer{

position: sticky;

position: -webkit-sticky;

bottom: 0;

}

サンプル2のデモページを見る

フッターを固定する場合はtopをbottomに変更するとコンテンツをブラウザの1番下からの距離をゼロにするという事になるから、ブラウザの下に固定される事になるよ。

3.サイドバーを固定

HTML

<div class="demo3">
    <p class="main">メインコンテンツ</p>
    <p class="side">サイドバー</p>
</div>

<p class="main">メインコンテンツ</p>

<p class="side">サイドバー</p>

</div>

CSS

.demo3{
    display: flex;
}

.main{
    width: 60%;
    margin: 0;
    padding: 10px;
    line-height: 3;
    background: linear-gradient(#F8BBD0, #880E4F);
}

.side{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 40%;
    height: 400px;
    padding: 10px;
    margin: 0;
    line-height: 3;
    background: linear-gradient(#FFF9C4, #F57F17);
}

.demo3{

display: flex;

}

.main{

width: 60%;

margin: 0;

padding: 10px;

line-height: 3;

background: linear-gradient(#F8BBD0, #880E4F);

}

.side{

position: -webkit-sticky;

position: sticky;

top: 0;

width: 40%;

height: 400px;

padding: 10px;

margin: 0;

line-height: 3;

background: linear-gradient(#FFF9C4, #F57F17);

}

サンプル3のデモページを見る

.mainと.sideをdivタグで囲んで、.sideをstickyで固定させているよ。

4.横幅が決まっている場合のナビゲーションを固定

HTML

<nav class="demo4">
    <ul>
        <li style="list-style-type: none;">
            <ul>
                <li><a>メニュー１</a></li>
            </ul>
        </li>
    </ul>
    <ul>
        <li style="list-style-type: none;">
            <ul>
                <li><a>メニュー２</a></li>
            </ul>
        </li>
    </ul>
    <ul>
        <li style="list-style-type: none;">
            <ul>
                <li><a>メニュー３</a></li>
            </ul>
        </li>
    </ul>
</nav>

<ul>

<ul>

</ul>

</li>

</ul>

<ul>

<ul>

</ul>

</li>

</ul>

<ul>

<ul>

</ul>

</li>

</ul>

</nav>

CSS

.demo4 {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 1000px;
  margin: 0 auto;
}

.demo4 ul {
  display: flex;
  width: 1000px;
  margin: 0;
  box-sizing: border-box;
  background: #F57F17;
  padding: 10px;
}

.demo4 li {
  width: calc(100% / 3);
  margin: 0 10px;
  background: #eee;
  padding: 0;
  text-decoration: none;
  text-transform: uppercase;
}

.demo4 a {
  cursor: pointer;
  width: 100%;
  padding: 10px 0;
  margin: 0;
  display: block;
  text-align: center;
}

.demo4 {

position: -webkit-sticky;

position: sticky;

top: 0;

width: 1000px;

margin: 0 auto;

}

.demo4 ul {

display: flex;

width: 1000px;

margin: 0;

box-sizing: border-box;

background: #F57F17;

padding: 10px;

}

.demo4 li {

width: calc(100% / 3);

margin: 0 10px;

background: #eee;

padding: 0;

text-decoration: none;

text-transform: uppercase;

}

.demo4 a {

cursor: pointer;

width: 100%;

padding: 10px 0;

margin: 0;

display: block;

text-align: center;

}

サンプル4のデモページを見る

横幅は1000pxに設定して固定させているよ。

5.横幅に合わせて可変するナビゲーションを固定

HTML

<nav class="demo5">
    <ul>
        <li style="list-style-type: none;">
            <ul>
                <li><a>メニュー１</a></li>
            </ul>
        </li>
    </ul>
    <ul>
        <li style="list-style-type: none;">
            <ul>
                <li><a>メニュー２</a></li>
            </ul>
        </li>
    </ul>
    <ul>
        <li style="list-style-type: none;">
            <ul>
                <li><a>メニュー３</a></li>
            </ul>
        </li>
    </ul>

<ul>

<ul>

</ul>

</li>

</ul>

<ul>

<ul>

</ul>

</li>

</ul>

<ul>

<ul>

</ul>

</li>

</ul>

CSS

.demo5 {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
  margin: 0 auto;
}

.demo5 ul {
  display: flex;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  background: #F57F17;
  padding: 10px;
}

.demo5 li {
  width: calc(100% / 3);
  margin: 0 10px;
  background-color: #eee;
  padding: 0;
  text-decoration: none;
  text-transform: uppercase;
}

.demo5 a {
  cursor: pointer;
  width: 100%;
  padding: 10px 0;
  margin: 0;
  display: block;
  text-align: center;
}

.demo5 {

position: -webkit-sticky;

position: sticky;

top: 0;

width: 100%;

margin: 0 auto;

}

.demo5 ul {

display: flex;

width: 100%;

margin: 0;

box-sizing: border-box;

background: #F57F17;

padding: 10px;

}

.demo5 li {

width: calc(100% / 3);

margin: 0 10px;

background-color: #eee;

padding: 0;

text-decoration: none;

text-transform: uppercase;

}

.demo5 a {

cursor: pointer;

width: 100%;

padding: 10px 0;

margin: 0;

display: block;

text-align: center;

}

サンプル5のデモページを見る

ブラウザの横幅に合わせて可変するナビゲーションだよ。レスポンシブデザインで使えるね！

6.横幅を短くすると横スクロールになるナビゲーションを固定

HTML

<nav class="demo6">
    <ul>
        <li style="list-style-type: none;">
            <ul>
                <li><a>メニュー１</a></li>
            </ul>
        </li>
    </ul>
    <ul>
        <li style="list-style-type: none;">
            <ul>
                <li><a>メニュー２</a></li>
            </ul>
        </li>
    </ul>
    <ul>
        <li style="list-style-type: none;">
            <ul>
                <li><a>メニュー３</a></li>
            </ul>
        </li>
    </ul>
</nav>

<ul>

<ul>

</ul>

</li>

</ul>

<ul>

<ul>

</ul>

</li>

</ul>

<ul>

<ul>

</ul>

</li>

</ul>

</nav>

CSS

.demo6 {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
  margin: 0 auto;
}

.demo6 ul {
  display: flex;
    min-width: 767px;
  margin: 0;
  box-sizing: border-box;
  background: #F57F17;
  padding: 10px;
}

.demo6 li {
  width: calc(100% / 3);
  margin: 0 10px;
  background-color: #eee;
  padding: 0;
  text-decoration: none;
  text-transform: uppercase;
}

.demo6 a {
  cursor: pointer;
  width: 100%;
  padding: 10px 0;
  margin: 0;
  display: block;
  text-align: center;
}

@media only screen and (max-width: 767px){
.demo6{
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}
}

.demo6 {

position: -webkit-sticky;

position: sticky;

top: 0;

width: 100%;

margin: 0 auto;

}

.demo6 ul {

display: flex;

min-width: 767px;

margin: 0;

box-sizing: border-box;

background: #F57F17;

padding: 10px;

}

.demo6 li {

width: calc(100% / 3);

margin: 0 10px;

background-color: #eee;

padding: 0;

text-decoration: none;

text-transform: uppercase;

}

.demo6 a {

cursor: pointer;

width: 100%;

padding: 10px 0;

margin: 0;

display: block;

text-align: center;

}

@media only screen and (max-width: 767px){

.demo6{

overflow-x: scroll;

-webkit-overflow-scrolling: touch;

overflow-scrolling: touch;

}

サンプル6のデモページを見る

ブラウザの横幅が767px以下になるとナビゲーションが横スクロールできるようにoverflow-xで設定しているよ。こちらもレスポンシブデザインで使えるね！

最後に

これでスティッキーヘッダーの説明は終わりだよ。

stickyはたった3行で簡単に実装できるから便利だよね！

もし、実装できないとか、おかしいコードとかあれば連絡待ってるよ！

それじゃ、また今度ね！