Bus errorとSegmentation faultに困ったら見るブログ

物理の研究者による日々の研究生活のメモ書きです ( python/emacs/html/Japascript/シェルスクリプト/TeX/Mac/C言語/Linux/git/tmux/R/ポケモンGO)

【CSS】サイドバーをあるところまでスクロールすると固定させる

百聞は一見にしかず

下にスクロールすると左にあるサイドバーがある場所で固定される
これをやりたい!!!


どうやるかは↑のページに書いてあるのでそれを参考にすればOK
一番大事な要素はCSSでclassを設定して、その中で position: sticky; とすれば良い


■ 参考 : position: stickyの面白い使い方と使用時の注意点



■ 参考 : JavaScript不要!スクロールに応じて要素を固定するCSS「position:sticky;」の使い方





このstickyで固定したh2タグに同時にidをつけてページ内リンクをしたけど、ページ内リンクが飛ばなかった
実際は下側にはリンクを移動できるけど、上側にはページを移動できない

しょうがないので p要素を追加して、そこにid属性をつけてページ内リンクをすることで解決した


ランキング参加中です

↓クリックしていただけると嬉しいです〜