スクロール率表示とおしゃれなスクロールバーを実装 9日目【WEBサイトを作る30日チャレンジ】 - Qiita

スクロール率をJavaScriptで、なるべくレスポンシブに実装 ■ポイント ・通常スクロールバーの装飾に使用する::-webkit-scrollbarのwidthを0にし、非表示にする ・スクロールバーを非表示にしたところに、position: fixedさせた要素をおいて、そこにスクロールバーを表示させる ・keyframeを使用し、10秒で色のグラデーションを変化させます ・スクロール率については、JavaScriptで要素を取得後、heightを計算しています ・レスポンシブにみえるよう、JavaScriptでスクロール率が100%になったら、ナビゲーションバーを非表示にして、フッターをそのまま表示させてます。 ・シャーロックホームズの小説は著作権が切れたものをコピペしています（何かカッコよさげですよね） ・PCのみ、メニューバーを固定表示（常時表示） ・スマホ・タブレットサイズの