【CSS】画面にペタッとついてくるやつを作ってみる

はじめに

まず「ぺたっとついてくるやつ」という日本語は無視してもらって、
今回作りたいのは、こういうやつ↓。

stiky.gif

主にheaderとかsidebarで使われたりしていますよね。
sticky〇〇なんて言われています。

JavaScriptで実装されていたり、それらに特化したプラグインなどもあるみたいです。

ですが、今回はCSSのposision: stickyを使って ペタッとさせますー

※お使いのブラウザによっては正しく表示されない場合があります。

完成品

headerがペタッと

CVがペタッと

パララックス風

おまけ

headerがペタッと

HTML

index.html
<header>
  topだよん
</header>
<div class="items">

  <div class="title title_color_red"></div>

  <div class="item">
    なんかの箱1
  </div>
  <div class="item">
    なんかの箱1
  </div>
  <div class="item">
    なんかの箱1
  </div>
</div>  

...割愛

<footer>
  bottomだよん
</footer>

CSS

style.css
.title {
...割愛
  position: sticky;
  top: 0;
}

これでOK!
topプロパティで「ペタッ」となる基準を決めています。
topに限らずleft,right,bottomでも決めることができます。

CVがペタッと

HTML

index.html
<header>
  topだよん
</header>

 ...割愛

<div class="items">
  <div class="item">
    なんかの箱1
  </div>
  <div class="item">
    なんかの箱1
  </div>
  <div class="item">
    なんかの箱1
  </div>
</div>

<div class="contact">
  <a href="#" role="button">申し込もうかなー</a>
</div>  

// 位置が重要!

<footer>
  bottomだよん
</footer>

CSS

style.css
.contact {
...割愛
  position: sticky;
  bottom: 0;
}

今度は常時画面下にfixしていて、footer(固定してほしいところ)に来たら「ペタッと」なるもの。
jsなどを使うとやや面倒くさい実装もこれなら楽にできます。
LP制作時などに活躍しそうですね。
ただ注意が必要で、「ペタッと」させたい直前で読み込まないといけません。今回でいうと、footerでペタッとさせたいので、その直前に置いてあげています。

stickyとfixedの違い

大きな違いは、画面にペタるときの親要素の関係です。
stickyは親に依存してペタるので、fixedのように常にビューポートを基準に固定され続けることはありません。
逆に言うと、stickyは親を設定してあげないと、思ったような挙動にならないかもしれません。

さいごに

HTML/CSSやjsを学び始めた頃は、どうやって実装して良いのかわからず「header 固定 ついてくる 追尾 js ...etc」とgoogleをさまよっていたのを今だに覚えています。
stickyという「したいこと」のワードにたどりつくのにも一苦労ですよね。
私のようにさまよっている人に届けば幸いです...:rolling_eyes:

今回のソースはこちら↓
githubから

参考

画像元
- スキマナース

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.