スマホのメニュー実装で使ったので備忘録的にメモ。
とりあえずこんな感じのfooterクラスを想定。(HTMLは省略)
footer {
width: 100%;
height: 100px;
color: black;
background-color: white;
position: fixed;
bottom: 0;
transition: 0.5s;
}
jQueryはこんな感じ。詳しくはコメント参照。
let start_position = 0;
let window_position;
let $window = $(window);
let $footer = $('footer');
// スクロールイベントの設定
$window.on( 'scroll' , function()
{
// スクロール量取得
window_position = $(this).scrollTop();
// 上にスクロールしていたら出現
if (window_position <= start_position)
{
$footer.css('bottom','0');
}
// 下にスクロールだったら消える
else
{
$footer.css('bottom','-100px');
}
// 現在位置を更新
start_position = window_position;
});
$window.trigger('scroll');
やっぱりコード書くのは楽しいな。
今個人的にLaravel勉強しているのですが何作ろうか………実務で覚えるタイプなのであんまり自作で云々とかないのよね。。