【jQuery】スティッキーメニュー実装してみたメモ

stickey.kit(jQueryプラグイン)で画面上部で文字を固定してみた

 

 

 

 

概要

 
jQueryでスティッキーヘッダを実装しました
 

 

 

環境

 

IDCFクラウド環境

  • サーバー (仮想マシン・ハードウェア専有マシン)
    S1 プラン メモリ1G

  • ボリューム(ディスク)
    基本 15GB

  • オブジェクトストレージサービス
    50GB

  • WordPressは仮想マシンKUSANAGI環境で使用
  • jQueryプラグイン stickey.kit

 

 

javascriptで要素のposition属性を操作する

 

 

スクロールのタイミングでタグ要素の位置を判断してcssのposition属性を変更する。

 

$(window).scroll(function() {
$("#scrcnt").text($(this).scrollTop());
    if ($(this).scrollTop() > 850){
       //表示する位置を固定する
       $('#menu ul').css({"background":"none","position":"fixed","top":"30px" ,"z-index":"9999"});
    }
    else{
       //表示する位置を固定しない
       $('#menu ul').css({"background":"yellow","position":"static"});
    }
});

 

 

 

 

jQueryプラグインを使用する

 

 

jQueryプラグイン「Stickey Kit」を使用してスティッキーメニューを実装してみました。

 
 
テーマのfunction.phpで、wp_enqueue_scriptsイベントにフックして’sticky-kit’プラグインを読み込むようにする。
 

function my_deregister_script() {
	if (!is_admin()) {
          ・
          ・
          ・
        //スティッキーメニュー作成用
	wp_enqueue_script( 'jquery.sticky-kit', get_template_directory_uri() . '/js/vendor/jquery.sticky-kit.min.js', array( 'jquery' ), '', true);
	}
}
add_action('wp_enqueue_scripts','my_deregister_script',100);

 
 
スティッキーメニューを表示したい画面で次のjQueryを呼び出す。
 

jQuery(function($){
    $(window).on('load', function() {
        //対象のタグを指定する
        $('#notification').stick_in_parent({offset_top:100});
    });
})

 

 

 

参考