【WordPress】簡単にスティッキーヘッダーを実装。Advanced Sticky Header

advanced_sticky_header_s
Advanced Sticky Headerは簡単にスティッキーヘッダーを実装できるプラグイン。設定で要素のクラス名を指定してサイトのヘッダーを上部に粘着させます。

Advanced Sticky Headerプラグインを導入

ダッシュボード >> プラグイン >> 新規追加 >> Advanced Sticky Headerを検索
有効化にするとAdvanced Sticky Headerが追加されます。
advanced_sticky_header_1

Header Class スティッキーにしたいnav要素のクラス名を入力
Animate アニメーション
Animation Type スティッキーヘッダーのトランジションスタイル
Shadow 影をつける
Sticky Already ページのロード時からスティッキーヘッダーを適用するか
Full Width スティッキーヘッダーの時全幅

サンプルとしてテーマのTwenty Twelveを使用しました。
sticky_menu_on_scroll_2
上記のような記事をスクロールすると下記のように上部に固定されます。

advanced_sticky_header_2

 
wordpress

【WordPress】簡単にスティッキーヘッダーを実装。Advanced Sticky Header

  • LATEST
  • RELATED
  • POPULAR