スクロールアップ/ダウンでスライドイン/アウトに異なる要素をアニメートする

Question

少しのアドバイスを探しています。だから自分のために新しいポートフォリオを作っています。私はブートストラップフレームワークを使用しており、ユーザーがスクロールしている方向に基づいてスライダをアニメートしたいと思います。

例えば、私はすでにnavbarクラスをスライドするアニメーションを持っています。しかし、ユーザーがページをスクロールすると、Navbarを非表示にします。これは、コンテンツをブラウズするときに画面上でより多くの可視性をユーザーに与えることです。その後、ページをスクロールアップしようとすると、.navbarクラスを再びスライドさせたいと思います。

これで、特定の要素やピクセルの高さをターゲットにしても簡単に動作させることができますが、それは私を助けません。私はいくつかのウェブサイト（linkInなど）で見たように達成可能であることを知っています。

だから、y軸などの正または負の値をターゲットにしているのでしょうか？

誰かが私にこれを手伝ったり、助けになる良いリソースを指摘してくれる人がいる場合は、私は何も見つけませんでした。

Answer 1

私は最後に問題を解決することができました。他の誰かが同じ種類の問題を抱えている場合は、これがあなたに役立つことを願っています:)

var lastScrollPosition = 0; 
window.onscroll = function() { 
    var newScrollPosition = window.scrollY; 

    if (newScrollPosition < lastScrollPosition){ 
     //upward - code here 
    }else{ 
     //downward - code here 
    } 
    lastScrollPosition = newScrollPosition; 
}