Sticky（追従サイドバー、スクロール）について、うまくいかない方はこれを試してみて下さい ||CSS||

追従スクロール、サイドバーのCSSプロパティ値「sticky」を設定しても、うまくいかないときは親要素に「display: flex」を追加してみてください。

「display: flex」なし

.hatena-module-custom-sticky {
    position: sticky;
    top: 40px;
}

うまくいってないテストページ

親要素に「display: flex」を指定していません。

「display: flex」あり

#box2 {
    display: flex;
}

.hatena-module-custom-sticky {
    position: sticky;
    top: 40px;
}

うまくいってるテストページ

親要素に「display: flex」を指定しました。

検索ボックスが、上にへばり付いていたかと、思います。

CSSのみでサイドバー追従を実装しようとしても、うまくいかないときは、ぜひ試してみて下さいね。

rubirubi.hateblo.jp

今日の一曲