下にスクロールで非表示、上にスクロールで再表示する固定ヘッダーを実装する方法 | TechMemo

下にスクロールしたら消え、上にスクロールすると再表示される固定ヘッダーを実装する方法をご紹介いたします。 以前、素のJavaScriptで実装する方法はご紹介しましたが、今回はjQuery版です。 下にスクロールで非表示、上にスクロールで再表示する固定ヘッダーを実装する方法 固定ヘッダーのCSSはこんな感じです。transitionを追加しておくことで、ヌルっと表示/非表示されます。 header { width: 100%; padding: 10px 0; position: fixed; top: 0; left: 0; z-index: 3; transition: all .3s ease; } <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $