Ryo Blog

〜WEB制作をスキルに〜

position: sticky; を使って簡単にサイドバーを固定しよう！

2023.11.09

こんなことを説明しています！

position:stickyを使ってサイドバーを追従させる方法
position:stickyが効かないときの対処法

解説動画

コードの解説

HTMLの記述

<div class="inner">
    <h1 class="title">position: sticky; を使って簡単にサイドバーを固定しよう！</h1>
    <div class="container">
        <div class="article">
            <div class="item">
                <img src='./img/img1.jpg' alt='' width='1200' height='600' loading='lazy'>
                <p>メイン記事概要</p>
            </div>
            <div class="item">
                <img src='./img/img2.jpg' alt='' width='1200' height='600' loading='lazy'>
                <p>メイン記事概要</p>
            </div>
            <div class="item">
                <img src='./img/img3.jpg' alt='' width='1200' height='600' loading='lazy'>
                <p>メイン記事概要</p>
            </div>
        </div>

        <div class="sidebar">
            <p>1. 固定したい部分</p>
            <p>2. 固定したい部分</p>
            <p>3. 固定したい部分</p>
        </div>
    </div>
    <div class="footer">
        別コンテンツ
    </div>
</div>

CSSの記述

// ====================
// レイアウトを整えるcss
// ====================
.inner {
    width: 100%;
    max-width: 1400px;
    margin: auto;
    padding: 0 40px;
}
.title {
    font-size: 40px;
    font-weight: 700;
    margin: 80px 0;
    text-align: center;
}
.container {
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
    .article { width: 70%; }
    .sidebar { width: 25%; }
}
.item {
    text-align: center;
    margin-bottom: 40px;
    img { width: 60%; }
    p { margin-top: 20px; }
}
.sidebar p {
    font-size: 20px;
    text-align: center;
    padding: 20px 0 100px;
}
.footer {
    height: 1000px;
    background: rgb(251, 184, 184);
    display: flex;
    justify-content: center;
    align-items: center;
}

// ====================
// 今回の内容
// ====================

.sidebar {
    position: sticky;
    top: 20px;
    background: rgb(199, 199, 255);
}

position:stickyが効かない原因

ポイント１

・サイドバーの高さがメインコンテンツよりも短くなっているか確認！

▶︎追従したい要素(sidebar)に背景を塗ってみる
background: rgb(199, 199, 255);

▶︎横並びの他の要素と同じ幅以上になっていたらstickyは効かない！

▶︎今回はcontainerにalign-items: flex-start をつけているのでarticle より sidebarの方が短くなっている

▶︎ align-items: flex-start を外した状態だとこのようになるので
実質効いていない状態になる！
(align-items: flex-start や height: 100%などで高さを可変に)

ポイント2

・親要素にoverflow: hiddenを指定していないか確認！

▶︎ containerにoverflow: hidden を入れてみるとstickyが効いていないのが確認できると思います。

記事一覧へ

りょー｜29歳フリーランス｜LPコーディング、WordPressサイト構築、ディレクション、Shopify (Liquid編集) を中心に活動しております！

完全未経験からWEB業界に入り
デイトラで3ヶ月間学習
営業開始後4日→ゼロイチ達成
開業3ヶ月後→月収50万達成
その後平均月収50万 (最高月収120万円)

WEBで独立したい！未経験からでもフリーランスになりたい！そんな方々のためになるような情報をこのブログを通して発信します！

私がWEB制作フリーランスとして独立するために学習したオンラインスクール「デイトラ」の詳細リンクはこちら↓↓

Products

Coming Soon

HP制作のご依頼

現在エンドクライアント様向けの事業サイトを作成中です。

WEB制作業務委託
のご依頼

LPコーディング、WordPress構築、Shopify構築、Liquid編集業務承ります！約1年間で80サイト以上作成をしてきました。LP制作最短2日で納品！
詳しくは、ポートフォリオをご覧ください。

コンテンツ

Ryo'Portfolio裏側徹底解説、レスポンシブほぼ不要のコーディング方法、実務必須のやや難しい実装解説、見積もりからコーディング、納品までの最初から最後まで全部見せます解説動画、等々「学習終わったけど実務が不安」という人に向けた「実務のお守り」のようなコンテンツを現在作成中です。

カートにアイテムが追加されました