jQuery スクロールで固定ヘッダーを透過させる

固定したヘッダーにナビゲーションリンクなどがある場合に、ヘッダーを画面上部に常に表示させるとユーザビリティが向上することがあると思います。しかしながらヘッダーを固定するとヘッダーの高さ分、表示領域が少なくなります。jQueryでスクロールしたときにヘッダーを透過(もしくは非表示)させる方法を試してみました。

結論

下のコードで実現できました。

$(window).scroll(function () {
  var showFlag = false;
  var opc = $('#header');
  opc.css('opacity', '1');
  var showFlag = false;

  if($(this).scrollTop() > 600) {
    if(showFlag == false) {
      showFlag = true;
      opc.stop().animate({opacity: 0.2}, 1000);
    }
  } else {
    if(showFlag) {
      showFlag = false;
      opc.stop().animate({opacity: 1}, 400);
    }
  }
});

$('#header').hover(
  function(e){
    var scrollTop = $(window).scrollTop();
    if(scrollTop > 600){
      $(this).stop().animate({opacity: 1});
    }
  },
  function(e){
    var scrollTop = $(window).scrollTop();
    if(scrollTop > 600){
      $(this).stop().animate({opacity: 0.2});
    }
  }
);

以下のサイトに実装したので、デモ代わりはこちらで。

WCG (Web Catalog Gift)
http://web-catalog-gift.tumblr.com/

やってること

$(window).scroll(function () { ･･省略･･ }); の部分で、ある程度スクロールしたら(上の例では600pxで指定)#headerをopacity 0.2に変更、スクロールを戻すとopacityを1に戻す。 $(‘#header’).hover( ･･省略･･ ); の部分で、600px以上スクロールしている場合に、#headerをマウスホバーするとopacity 1に、#headerからマウスカーソルを外すとopacityを0.2に戻す処理をしています。参考にさせていただいたのは以下の記事です。

jQueryでスクロールすると表示する系いろいろ | webOpixel
http://www.webopixel.net/javascript/538.html

上記記事では主に3つのサンプルがありますが、今回は1つ目のサンプルの「スライドアニメーションして表示」部分を参考にしました。

未解決の疑問

完成するまでに遭遇したトラブルでいまだに理由が分からない点があるのでメモ。スクロールしたら透過させる処理部分を書いているときに遭遇したのですが、最初に書いたコードは以下のようになっていました。

$(window).scroll(function () {
  if($(this).scrollTop() > 600) {
    $('#header').animate({opacity: 0.1}, 1000);
  } else {
    $('#header').animate({opacity: 1}, 400);
  }
});

処理としては透過させる/戻すという処理なので、if文でトグルさせる動きにすればよいと思ったのですが、このコードだと実行される条件を満たしてもすぐに処理が行われず、数秒～十数秒後に処理が行われていました。そこでためしに.animate()メソッドから.hide()/.show()メソッドに置き換えてみると条件を満たした際、即時実行されていました。

$(window).scroll(function () {
  if($(this).scrollTop() > 600) {
    $('#header').hide();
  } else {
    $('#header').show();
  }
});

メソッドによる挙動の違いは分かったのですが、自分で解決できず見つけたのがwebOpixelさんの記事でした。やってることはフラグ用の変数を定義して、スクロール量の条件を満たした際に、さらにフラグでの条件判断をしています。自分が書いたコードとの違いは条件判断の回数(フラグの判断があるかないか)。しかしながらメソッドが違うとその条件判断があっても無くても動作する。メソッドによって条件判断にかかる時間が違うのだろうか？jQueryのリファレンスをしっかり読めば分かるのかもしれませんが。。このあたりの理解を深めるのが課題と思っています。

unknown