Wixでスクロール時だけ小さい固定ヘッダーに変更する方法｜Veloを使わない設定方法も解説

Wixでホームページを作成していると、デザイン性を重視した大きなヘッダーが便利な一方で、ページをスクロールした後も固定表示するとコンテンツ部分が狭くなってしまうことがあります。

この記事では、ページ上部では大きなヘッダーを表示し、スクロール後は小さいヘッダーへ切り替える方法や、Wix標準機能で実現するための考え方、Veloを利用する場合の注意点について解説します。

Wixの固定ヘッダーで起こりやすい問題

Wixではヘッダーを固定表示に設定することで、ユーザーがページを下へ移動してもメニューを常に表示できます。ナビゲーションが見える状態になるため、長いページでは便利な機能です。

しかし、ヘッダーの高さが大きいデザインの場合、固定表示すると画面上部の多くをヘッダーが占有してしまいます。特にノートパソコンなど縦方向の表示領域が限られる環境では、本文が見える範囲が少なくなります。

そのため、一般的なWebサイトでは「最初は大きなヒーローヘッダー」「スクロール後はコンパクトな固定ヘッダー」という設計がよく使われています。

Wixにはテンプレートやエディタの種類によって、スクロール時のヘッダー表示を変更できる機能があります。まずはVeloコードを使う前に、標準設定を確認することがおすすめです。

Wixエディタでは、ヘッダーをクリックして設定メニューを開き、「スクロール時の表示」や「固定位置」などの項目を確認します。利用しているテンプレートによって名称は異なりますが、縮小表示に対応している場合があります。

また、ヘッダー内のロゴやメニューを別サイズで配置できるテンプレートでは、スクロール時の見た目を調整できる場合があります。

Wixで最初の大きなヘッダーと、スクロール後の小さいヘッダーを完全に切り替えたい場合は、2つのヘッダー用デザインを用意する方法があります。

例えば、通常表示用として高さ300px程度のヘッダーを作成し、スクロール後用として高さ80px程度のコンパクトなヘッダーを別途配置します。

その後、スクロール位置に応じて表示状態を変更する仕組みにします。この方法は一般的なWebサイトで使われる「スティッキーヘッダー」の作り方に近い考え方です。

Wix Veloを利用すると、JavaScriptを使ってスクロール位置を検知し、要素の表示・非表示を制御できます。

基本的な流れは、ページ読み込み時にスクロールイベントを取得し、一定以上スクロールした場合に小さいヘッダーを表示し、大きいヘッダーを非表示にするという処理です。

ただし、Wixのヘッダーは通常のページ要素とは扱いが異なる部分があるため、AIが生成したコードをそのまま貼り付けても動作しないケースがあります。要素IDの指定や配置場所が正しいか確認する必要があります。

Veloでスクロール制御を行う場合、最初に確認するべきなのは対象要素に正しいIDが設定されているかどうかです。

例えばコード内で「#headerSmall」と指定している場合、Wixエディタ側の要素IDも同じ名前になっていなければ処理は実行されません。

また、コードを配置する場所も重要です。ページコードに記述する処理と、サイト全体で動かす処理では設定場所が異なります。

PCでは理想的なヘッダーでも、スマートフォンでは画面サイズが大きく異なるため、同じ設定では見づらくなることがあります。

スマホ表示では、最初からコンパクトなヘッダーにする方法や、メニューアイコンだけを固定表示する方法も検討するとユーザーの操作性が向上します。

特にホームページへのアクセスの多くがスマートフォンの場合は、PC向けデザインよりもスマホでの見やすさを優先することが重要です。

Wixで「通常時は大きなヘッダー、スクロール後は小さい固定ヘッダー」にするデザインは、多くのWebサイトで採用されている方法です。

まずはWix標準のヘッダー設定で対応できるか確認し、難しい場合は2種類のヘッダーを用意して表示を切り替える方法を検討すると実現しやすくなります。

Veloを利用する場合は、生成されたコードをそのまま使うのではなく、要素IDや配置場所を確認しながら調整することが成功のポイントです。サイト訪問者が快適に閲覧できるよう、ヘッダーの高さや固定方法を最適化しましょう。