[ 勉強 ] スクロールした時にサイドバーを固定位置に配置する

人様のソースコードを読み解くシリーズです。今回は、スクロールするとサイトバーの一部がある地点から固定化されるjQueryを見ていきます。

Java Script

$(function($) {
   var tab = $('.hoge'),
   offset = tab.offset();

   $(window).scroll(function () {
      if($(window).scrollTop() > offset.top) {
         tab.addClass('fixed');
      } else {
         tab.removeClass('fixed');
      }
   });
});

これも非常に簡単なソースコードですね。

ちょっと面白いというか、不思議な書き方をしているな、と思ったのが、

Java Script

var tab = $('.hoge'),
   offset = tab.offset();

こういうふうに、変数を設定するときも、コンマで続けて書けるのですね。以下の記事を見て、こういう変数の設定の記述方法って色々個性があるって知りました。

このjQueryはJavaScriptが重要というより、CSSのほうが重要です。

CSS

.fixed{
   position:fixed;
   top:20px;/*固定させたい位置*/
}

こんな感じで、『position:fixed;』を設定することで固定しています。

offset()メソッドは、表示位置を返します。offset().topで上からの位置、offset().leftで左からの位置を取得できます。

ただし、サンプルのソースコードのように、『offset = tab.offset();』と変数にしておかないと、スクロールする度にチラツキが発生しましたので注意が必要です。

あと、

Java Script

$(function($) {
});

は、どうしてこういう書き方しているのだろう?普通なら、

Java Script

$(function() {
});

でよいわけだし。Prototype.jsのような別のJavaScriptも一緒に使う場合、$が衝突してしまうので、それを回避しているのだと思います。

ただ、『$(function($)』って記述しているソースコードってあまり見ないですね。敢えてjQueryとわかるように、

Java Script

jQuery(function($) {
});

と記述してたり、

Java Script

(function($){
})(jQuery);

と記述していたりするような気がします。