_s(Underscores)でヘッダーナビゲーションに凝ってみる

続いて躓いたのは、スクロールした時のヘッダーの動きです。

 

これは要件ではなく、個人的に実装したくて探しました。

画面をスクロールしてもヘッダーが固定表示され、

かつ、ヘッダーの高さが縮んだり、背景の色や透明度が変わるというもの。

 

よく見かけるんですが、いつもどうやってるんだろう?って思ってました。

これはプラグインではなく、jQueryとCSSでできたんですね。

参考にさせていただいたのは以下のサイトです。

 

ヘッダー・ナビゲーションを固定表示させるアイデア5つ

 

私が使わせてもらったサンプルは、

「最初から固定表示、特定位置までスクロールでサイズ・色を変える」

でした。

 

ただ、私はjQuery初心者で配置の仕方がイマイチ分からなかったので、

以下のように、上下に少し付け足して「header-navi.js」というファイル名で保存し、

テーマフォルダ内の「js」フォルダにアップロードしました。

jQuery(function($){

var _window = $(window),
    _header = $('.site-header'),
    heroBottom;

_window.on('scroll',function(){
    heroBottom = $('.hero').height();
    if(_window.scrollTop() > heroBottom){
        _header.addClass('transform');
    }
    else{
        _header.removeClass('transform');
    }
});

_window.trigger('scroll');

});

 

さらに、上記のjsファイルを読み込むために、

「functions.php」の一番下に以下の記述を追加しています。

function header_navi_script() {
wp_enqueue_script( 'header_navi', get_template_directory_uri().'/js/header-navi.js',array(),'' );
}
add_action( 'wp_enqueue_scripts', 'header_navi_script' );

 

今となっては何か違う方法があったのでは…と思わなくは無いですが、

とりあえず実現できたので良しとしておきます。

 

 

シェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメントする