スマホのメニュー実装で使ったので備忘録的にメモ。

とりあえずこんな感じの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勉強しているのですが何作ろうか………実務で覚えるタイプなのであんまり自作で云々とかないのよね。。