多くのウェブサイトは、固定されたトップナビゲーションでデザインされています。スティッキー?ヘッダー.これは一般的なデザイン手法で、ページが下にスクロールされたとき、トップナビゲーションが常に畫面上部に表示され、素早く元のページに戻るのに役立ちます。メニューまたはその他の重要なリンクエリア。

スティッキーヘッダーとは

スティッキーヘッダーとは、ページがスクロールダウンしても上部に固定されたままのヘッダーです。フッターセクションにあります。ナビゲーションメニューを常に表示させ、ジャンプステップを減らし、アクセスを向上させるために使用します。

使用準(zhǔn)備

スティッキーヘッダー機(jī)能は アストラ?プロ プラグインの一部として、まずAstra Pro AddonプラグインでAstraテーマをインストールする必要があります。プラグインが有効化されたら、バックエンドに移動(dòng)し、関連するモジュールを開きます。

スティッキーヘッダーを有効にする手順

• Astra Pro プラグインをインストールし、有効化する。
• バックエンドに移動(dòng)し、Astra > Dashboardをクリックし、以下を開きます。 スティッキーヘッダー モジュール

• 外観 > カスタマイズ > ヘッダービルダー > に進(jìn)む。 スティッキーヘッダーセットアップページに入るには

スティッキーヘッダーの設(shè)定

メインヘッダーを修正
有効にすると、ページがスクロールしている間、メインナビゲーションは固定されたまま表示されます。

上下のヘッダー部分を固定
Above HeaderまたはBelow Headerを使用する場合、固定するかどうかを個(gè)別に設(shè)定できます。

• ヘッダーの上は、ボタン、メニュー、連絡(luò)先情報(bào)などを追加するためによく使用されます。
• ヘッダーの下探すボックス、セカンダリーメニュー、ショートアナウンス

設(shè)定を表示する前に、ヘッダーセクションモジュールを有効にする必要があります。

ロゴとスタイルの調(diào)整

さまざまなロゴの設(shè)定
スティッキー?ヘッダーの各種設(shè)定に対応 ロゴこのデザインスタイルは、メインサイトのロゴとは別のものである。

レティーナロゴの追加
高解像度デバイス用のHD版ロゴのアップロードに対応。

ロゴの幅を調(diào)整する
スライダーを使ってロゴの幅をコントロールし、異なるデバイスサイズに合わせることができます。

背景色と透明度の設(shè)定
Colors and Backgroundモジュールが有効な場合、スティッキーヘッダーの背景色を設(shè)定できます。また、視覚的な階層のために背景の透明度を調(diào)整することもできます。

背景ぼかし効果の追加（背景ぼかし）

ある アストラ テーマバージョン4.1.0以上では、スティッキーヘッダーに新しい背景ぼかしエフェクトが追加され、ナビゲーションバーに緩やかなぼかしレベルが追加され、ページがよりモダンな外観になりました。この機(jī)能は背景色の透明度設(shè)定に依存し、デザインパネルで手動(dòng)で有効にする必要があります。

手順は以下の通り：

• Sticky Headerモジュールがオンになっている狀態(tài)で、外観 > カスタマイズ > ヘッダー > Sticky Headerに進(jìn)みます。

• プライマリー?ヘッダー?ブロックをクリックし、デザイン?タブに移動(dòng)する。

• 背景ぼかし」オプションを見つけ、オンにする。

• ぼかし効果をより分かりやすく自然にするために、背景色を半透明に設(shè)定することをお?jiǎng)幛幛筏蓼埂?/li>

この機(jī)能は、プライマリヘッダーが有効になっているスティッキーステートでのみ利用可能で、Astra Proプラグインに提供されている機(jī)能拡張の1つです。

外観の強(qiáng)化設(shè)定

シュリンク効果
有効にすると、ページスペースを節(jié)約するために、スティッキーヘッダーはスクロール狀態(tài)で自動(dòng)的に小さくなります。

アニメーション効果
エントリーアニメーションを追加して、スティッキーヘッダーをよりダイナミックにすることができる。

スクロールダウン時(shí)に非表示
有効にすると、スティッキーヘッダーはページが下にスクロールされると隠れ、上にスクロールされると再び現(xiàn)れます。このオプションはスティッキープライマリーヘッダーと併用する必要があります。

表示するデバイスを選択する
デスクトップのみ、モバイルのみ、または両方で有効に設(shè)定可能スティッキー?ヘッダー.

影のスタイルを削除する（オプション）

デフォルトのシャドー効果が不要な場合は、以下を追加する。 カスケーディングスタイルシート コード

#ast-fixed-header .main-header-bar {.
box-shadow: 未設(shè)定；
}

概要

アストラ?プロ スティッキーヘッダー機(jī)能は、簡単な設(shè)定だけでなく、背景のぼかし、ロゴの切り替え、アニメーション、ズームなどの様々な視覚的な詳細(xì)設(shè)定をサポートしています。これらのオプションを合理的に使用することで、美しく、分かりやすく、操作しやすいナビゲーションバーを作成し、サイト全體のセンスを高めることができます。

関連記事

お問い合わせ
チュートリアルが読めない？無料でお答えします！個(gè)人サイト、中小企業(yè)サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨詢：1025174874
三 Eメール：info@361sale.com
④ 勤務(wù)時(shí)間: 月～金、9:30～18:30、祝日休み