下記サイトの右メニュー下にある、「スポンサードリンク」のように、スクロールしてもページ内の固定位置に残るメニューを実装したいです。
http://www.akb48matomemory.com/archives/1017688632.html
ただ、以下のようにもしたいのですがこういった実装は可能なのでしょうか。
- 下にスクロールした場合はトップ固定
- 下から上にスクロールした場合はウインドウの下部に固定
お知恵を拝借させてください。
よろしくお願いします。
下記サイトの右メニュー下にある、「スポンサードリンク」のように、スクロールしてもページ内の固定位置に残るメニューを実装したいです。
http://www.akb48matomemory.com/archives/1017688632.html
ただ、以下のようにもしたいのですがこういった実装は可能なのでしょうか。
お知恵を拝借させてください。
よろしくお願いします。
onscrollイベントのコールバックで現在の「scrollTop」とその前の「scrollTop」を較べていて方向が分かった上で、CSSのposition: fixedとtop: 0かbottom: 0でできます。
下記のように「scrollTop」をどのブラウザーでも計算できます。
window.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop