追従する目次の機能追加(動作確認テスト記事)

スマホで追従する目次の機能追加

https://motoki-design.co.jp/wordpress/mobile-toc/ ←実装イメージ

【現在の仕様】
min1270px以上で「追従する目次」を表示(サイドバー)

【仕様要望】
➀機能対象範囲:スマホを含む1270px未満の画面領域
➁追従する目次アイコン表示位置:TOPへ戻るボタン直上
➂目次本体表示位置:画面中央
➃目次表示方法:目次アイコンタップ(クリック)でふわっと目次本体表示(モーダルのイメージ:背景はスクロール可)
➄目次の閉じ方:背景(黒半透明)タップ(クリック)+ 目次アイコン(閉じる) + 目次本体「閉じる」ボタンのいずれかで、ふわっと。
➅目次本体の機能動作:既存「追従する目次」に準ずる(アンカーリンクへスムーズスクロール)

【デザインイメージ】
画像1枚目:目次展開前(目次アイコン)
画像2枚目:目次展開後(目次アイコン+閉じるボタン)
※画像はセンタリング出来ていませんが、お気になさらず。
使用画像: ★細かい調整は自分でします。

追従する目次展開前
追従する目次展開後

【納品基準】
仕様要望を満たし、デザインについては「ざっくりと」イメージに近い状態。

動作確認用の見出し1

動作確認用の見出し2

動作確認用の見出し3

動作確認用の見出し4

動作確認用の見出し5

動作確認用の見出し6

コメントは受け付けていません。