たった2つのcssだけでサイドバー最下段のモジュールを固定する

いろいろ限定的で誰にでもオススメできるわけではないカスタマイズをもう1つ。よくあるサイドバーの最下段のモジュールが画面トップに来たら位置固定されるものです。通常はjavascriptとか使うのでしょうが、cssだけでもある程度は可能です。

デモ

少しでも軽くするために画質だいぶ落としてますが、それでもかなり重いですごめんなさい。

f:id:c-miya:20170505233240g:plain
サイドバー最下段のRECENT POSTSの部分がスクロール途中から画面上部に固定されています。これをやります。

css

以下のcssをデザインcssに加えます。

#box2{
display: -webkit-flex;
display: flex;
}
.hatena-module:last-of-type{
position: -webkit-sticky;
position: sticky;
top: 0;
}

これだけでOKです。

使えない状況

IEとEdgeではこれきかないそうです。でもまぁ別に表示がおかしくなるとかではないので良いんじゃないでしょうか。どうしてもIE/Edgeでも使いたいんだ!という人は素直にjavascriptとか使いましょう。

また、固定する要素よりも上…親とか先祖の要素でoverflow: hidden;が使われているとききません。私のこのブログで試そうとしたらガッツリ使っていたので適用できませんでした。

使っているテーマやそのあとのカスタマイズ次第では使えないでしょうね。とりあえず上のデモはZENO-TEALそのままの状態で使えることを確認しています。

まとめ

cssだけで済むので配布テーマにも組み込むことができそうです。また使う時があったら使ってみようと思います。

ABOUT ME
著者近影
宮城島 俊太 (Shunta MIYAGISHIMA)

茨城県つくば市在住のウェブサイト運営者。ネット上ではc-miya、orefolderなどの名前で活動しています。

ストレスに弱いので、できるだけ好きなことだけをして生きたいと思いながら生活しています。「楽しい」が優先順位の一番上に来るようにしたいですね。

CATEGORY
RANKING