スポットガイド《駅ずかん》は、メインマップをスクロールしても表示し続ける仕様へ改良することにしました。
自然災害や事故で鉄道運行が滞ると、《駅ずかん》路線図ガイドへのアクセスが増えます。
今回の改良は、どの駅で乗り換えられるのか、マップと駅一覧を同時に見られるようにすることが目的。
まずは、田園都市線とたまプラーザ駅のガイドに適用して、少々様子をみます。
CSSをやめてJavaScriptで対応
ここからは技術的な話です。
スクロールしても、メインマップが画面上に留まるようにするため、当初は「position:sticky」を使うCSSで進めていました。
しかし、デバイスによってはメインマップを縮小しないと他のコンテンツが見にくくなってしまいます。
いろいろ調べていたら、JavaScriptのみ(jQueryを含む)で対応した方が楽そうです。結果、スクロールの位置によって「opacity」を変える手段を取りました。