SWELL│スマホ表示で「上スクロール時のみヘッダー表示」にする方法

SWELLテーマを使ってスマホサイトを作成する際、「ヘッダーは普段は非表示にして、上スクロール時のみ表示させたい」というケースがあります。

ユーザーの閲覧体験を損なわず、スクロール中の視認性を向上させるこの手法は、スマホ時のUI改善にとても有効です。

本記事では、JavaScriptとCSSを用いてその動きを実現する方法を解説します。

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

SWELLのスマホ表示で「上スクロール時のみヘッダー表示」にする方法

• スマホ表示（960px以下）限定
• 下にスクロールしている間はヘッダーを非表示
• 上にスクロールするとヘッダーが出現

以下のコードを挿入するとSWELLのスマホ表示で「上スクロール時のみヘッダー表示」にできます。