development_creative

この記事は1年以上経過しています。

position: sticky; の基本的な使い方とstickyを使用したスクロール進捗バーの作り方

position: sticky;とはCSSのプロパティの値の一つです。
いままでは、staticrelativeabsolutefixed の4つの値がWeb制作のメインで使用されていました。
今回ご紹介するstickyは今まで使用されていた staticrelativeabsolutefixed の挙動をいい感じにまとめてくれた便利な値になります。

以前までsafariでは使用できないなど、対応ブラウザが少なかったのですが、昨今は多くのブラウザに対応しているため利用する方が徐々に増えてきています。

stickyはトリッキーな動きをしているため、うまく挙動できないとの声を多く見られます。
そんな便利なのに忌避されているstickyを今回は説明していきたいと思います!

position: sticky; とは?

position: sticky;は、要素をスクロール位置に応じて固定するためのCSSプロパティです。通常、要素はスクロールに従って固定されたり、ページの端にスナップしたりすることはありませんが、position: sticky;を使用すると、特定の条件で要素を固定することができます。

基本的な使い方は次のとおりです:

  1. 要素を固定したい場所にCSSのクラスやIDを使って要素を特定します。
  2. position: sticky;を要素に適用します。

例として、スクロール時にナビゲーションメニューを画面の上部に固定する方法を見てみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>Sticky Navigation Menu</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <header class="sticky">
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  
  <!-- ここに他のコンテンツを記述 -->
  <div class="div01">コンテンツ1</div>
  <div class="div02">コンテンツ2</div>
  <div class="div03">コンテンツ3</div>
</body>
</html>

今回はbodyのなかにdivごとに色をつけたコンテンツを用意し、その上部にnavが固定表示されるものを作成しました。

この例では、ナビゲーションメニューを画面の上部に固定するためにheader.stickyposition: sticky;を適用しています。これにより、スクロールするとナビゲーションメニューが常に画面の上部に表示されるようになります。
細かい記述などをしなくてもいい感じに上部にナビゲーションが固定されるなんて、なんて便利なんでしょう♪

気をつけること

  • position: sticky;は親要素に対しても動作します。親要素がスクロール可能でない場合、position: sticky;は効果がありません。
  • 位置を指定するためにtopbottomleftrightプロパティを使用します。スティッキー要素が固定される位置は、指定したプロパティに基づいて決まります。
  • position: sticky;は比較的新しいCSSプロパティなので、すべてのブラウザで完全にサポートされているわけではありません。最新のブラウザでの動作を確認してください。

このようにposition: sticky;を使うことで、ヘッダー、フッター、サイドバーなど、さまざまな要素をスクロール位置に応じて固定することができます。

基本的にはどこに位置をくっつけるかを指定する必要があり、この基準がわからない状態だとposition: sticky;はうまく挙動出来ません。

position: sticky; を利用してスクロールの進捗がわかるバーを作ってみた。

ページのコンテンツが長い場合、あとどれくらい説明が続くのだろう?と読者を不安にさせてしまいます。
現在のページが全体のどれくらいの位置なのかがわかるような進捗バーを position: sticky; を利用して作ってみました。

スクロールすると上に表示されたバーが進んでいくのがわかるかと思います。
フォームや説明書などのページであると便利そうですね!

詳しいコードはこちら。

<!DOCTYPE html>
<html>
<head>
  <title>Sticky Progress Bar</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="progress-container">
    <div class="progress-bar" id="progressBar"></div>
  </div>

  <!-- ここにコンテンツを記述 -->
  <div class="div01">コンテンツ1</div>
  <div class="div02">コンテンツ2</div>
  <div class="div03">コンテンツ3</div>
</body>
</html>
body {
  margin: 0;
  padding: 0;
}

.progress-container {
  position: sticky;
  top: 0;
  background-color: #f1f1f1;
  height: 5px;
}



.progress-bar {
  height: 100%;
  background-color: #007BFF;
  width: 0;
  transition: width 0.3s;
}

.div01{
 height:500px;
 background-color: #fdeecd;
}

.div02{
 height:500px;
 background-color: #f2b1b0;
}

.div03{
 height:500px;
 background-color: #92b0d8;
}
document.addEventListener('scroll', function() {
  const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  const scrolled = (winScroll / height) * 100;
  document.getElementById('progressBar').style.width = scrolled + '%';
});

googleフォームみたいに下部に表示させても便利♪
説明が長いページなどでも使えるコードになりますのでぜひ使用してみて下さい。

Related ariticle

関連記事

TOP