クリックでリンク先へ
スタンダードなもの
本当にシンプルなタイプのもの。
See the Pen スクロール by kbyt (@kbo58) on CodePen.
ヘッダーが追随する
スクロールでヘッダーがついてくるもの
またヘッダーの高さを過ぎると若干ヘッダーにシャドーが入る。
See the Pen 追随するheader by kbyt (@kbo58) on CodePen.
ヘッダーが途中から出現しそのまま追随
セクションに入る手前でヘッダーがフェードインしてきて、そのままついてくるタイプのもの
See the Pen Untitled by kbyt (@kbo58) on CodePen.
ヘッダーが途中から出現しそのまま追随 その2
上のものと似ているけどフェードインしてくるヘッダーの高さが小さい
See the Pen ヘッダーが追随する。高さも変わる by kbyt (@kbo58) on CodePen.
ヘッダーが途中から出現しそのまま追随 その3
ナビが下にあるバージョン
See the Pen スクロールから固定 by kbyt (@kbo58) on CodePen.
「Topへ戻る」関連
クリックでスクロールしながらTopへ戻る
See the Pen topへ戻るボタン by kbyt (@kbo58) on CodePen.
スクロールすると「Topに戻るボタン」が出る
See the Pen スクロールするとtopボタンが出る + スクロール by kbyt (@kbo58) on CodePen.
☆参考「Topに戻るボタン」のスタイル
See the Pen 丸いtopへ戻るボタン by kbyt (@kbo58) on CodePen.
コメント