システム事業部の五十島です。
今回は追従型メニューについて説明していきたいと思います。
追従型メニューとは、スマホサイトでよく見る『スクロールしても画面上に表示されているメニューや広告など』になります。
ちょっと難しそうと思うかもしれませんが、簡単なCSS・HTMLとちょっとだけ頭を使うJSで作れてしまいます。
htmlとCCSは以下のようになります。
構造はシンプルで、idが#init_button
と#button_down_area
のボタンは最初から表示させておいて、 両方が画面上から見えなくなったら、スクロール用のボタン(.scroll_button_area
)を表示させるというものです。
<!-- 初期表示のボタン --> <button id="init_button">スクロールするボタン</button> <!-- 実際にスクロールするボタン --> <div class="scroll_button_area"> <button>スクロールするボタン</button> </div> <div style="height: 500px"> <!-- スペースを開けるためのタグ --> </div> <!-- ボタンのスクロール終了位置 --> <div id="button_down_area"> <button>スクロールするボタン</button> </div>
.scroll_button_area { display: none; } .show_scroll_button { display: block; position: fixed; bottom: 0px; left: 0px; width: 100%; padding: 0px; background-color: #ffffee; }
JSは以下のようになります。
表示している位置の情報を取得して、div.scroll_button_area
に表示させるクラスを追加して、制御しています。
$(document).ready(function() { $(function() { $(window).on('scroll', function() { var topBtn = $('#init_button'); // ボタンが表示されていない if (!topBtn.size()) { return ; } // スクロール中のボタン表示 var scrollArea = $('.scroll_button_area'); // 開始位置、終了位置の取得 var startLine = topBtn.offset().top; var endLine = $('#button_down_area').offset().top; // 表示画面領域の座標取得 var scrollTop = $(this).scrollTop(); var scrollBottom = scrollTop + window.innerHeight; // 上部ボタンが画面から非表示、 // 下部ボタンが画面上に表示されるまで if ( scrollTop > startLine && scrollBottom <= endLine ) { scrollArea.addClass('show_scroll_button'); } else { scrollArea.removeClass('show_scroll_button'); } }); }); });
offset()
メソッドで、画面全体のどの位置に各ボタンがあるのかを取得します。
ScrollTop()
やwindow.innerHeight
メソッドで表示領域の上下の座標を取得し、 22行目で各ボタンが表示領域に存在しているかを判定しています。
各ボタンが表示領域外の場合はスクロール用のボタンを表示し、それ以外の時は非表示という制御を行なっています。
JSを改良すれば、表示・非表示のタイミングを好きに変更できるので、改良して使って見てください。