サイドナビをjQueryでスクロールさせず固定に

拙サイトの新デザインでナビをサイドに配置したので、jQueryで、ナビをスクロールさせず固定してしまおうと思い立つ。参考にさせてもらったのは次のエントリ。

• スクロールについてくる要素とその可動範囲の指定。あれ？この場合ついていかない要素ってことになるのかな？ | Memorandum Book - written by Ravenala

深謝。参考エントリ内の説明通りに設定すれば万事動きます。

---

で、拙サイトはHOMEボタンをeszettロゴのみに設定しているので、スクロールするとHOMEボタンだけ無くなることになる。そこで、スクロールダウンしてヘッダのeszettロゴが見えなくなった時点で新たにeszettロゴを出現、またスクロールアップしてヘッダのeszettロゴが見える直前に新たなeszettロゴを隠すというギミックを追加。

$(function(){
 var memuPosi = $("固定するナビのクラス名またはID名").offset();
 var menuTopMargin = 24;
 var targetScrollValue = memuPosi.top - menuTopMargin;
 $("eszettロゴのID名").hide(); //新たに出現させるロゴの初期状態（隠した状態）
 $(window).scroll(function() {
  var wScrollvalue = $(window).scrollTop();
  if(wScrollvalue > targetScrollValue){
   $("固定するナビのクラス名またはID名").css({
    position: "fixed",
    top: menuTopMargin
   });
   $("eszettロゴのID名").fadeIn(800); //フェードイン800ミリ秒でロゴを出現
   }
  else{
   $("固定するナビのクラス名またはID名").css({
    position: "absolute",
    top: "0"
   });
   $("eszettロゴのID名").stop().hide(); //ロゴを隠す
   }
 });
});

赤い部分を所定の位置に追加。どのような状態かは拙サイトをご覧あれ。

因みに、参考エントリでは上記青の部分がないので追加すること。

---