サイドバーが途中でついてくる奴作った

最近よく見かける下にスクロールしてるとサイドバーが途中から上部で固定される奴がどういう実装になってるのか気になったからちょろりとjquerypluginとして実装してみた。基本的には高さとってposition:fixedを変えてるだけ。

(function($) {

    $.fn.sidebarFixed = function(action, option){

        var sidebarFixed = function(self) {
            var $self = $(self);
            var top = $self.offset().top;
            self.isFixed = false;

            $(window).on('scroll', function() {
                if(!self.isFixed) {
                    if(top <= $(window).scrollTop()) {
                        $self.css({
                            'position': 'fixed',
                            'top': '0px'
                        });
                        self.isFixed = true;
                    }
                } else {
                    if(top >= $(window).scrollTop()) {
                        $self.css({
                            'position': 'static',
                        });
                        self.isFixed = false;
                    }
                }
            });
        };

        return this.each(function(i) {
            sidebarFixed(this);
        });
    };
})(jQuery)

↓がデモ。

やってることはpluginを読み込んで、途中で止めたいdivを↓みたいにpluginに渡してやるだけ。

    $(document).ready(function() {
      $('.fixed').sidebarFixed();
    });

サクッと書いたけどFirefoxとChromeでは動くみたい。IEは環境がないからよくわからん。jsはさくっとかけてさくっと試せるからやっぱり便利。