[ 勉強 ] 一番下までスクロールするとコンテンツが横からスライドして表示するjQuery

人様のソースコードを読み解くシリーズです。前回の続き、その3です。

3.下部までスクロールすると横からスライドして表示

Java Script

$(function() {
   var winWidth = $('body').outerWidth(true);
   var footer = $('#footer');
   var slide = $('#slide');
   //画面下位置を取得
   var bottomPos = $(document).height() - $(window).height() -500;
   var showFlug = false;

   // ウィンドウより小さかったら開く
   panelOpen();
   //slideを画面右外へ配置
   $('#slide').css('margin-left', winWidth+'px');
   $(window).scroll(function () {
        panelOpen();
   });
   //閉じるボタン
   $('#close').click(function(){
      footer.hide();
   });
   //ウィンドウリサイズしたらwidth変更
   $(window).resize(function(){
      winWidth = $('body').outerWidth(true);
      bottomPos = $(document).height() - $(window).height() - 500;
   });

    function panelOpen() {
        if ($(this).scrollTop() >= bottomPos) {
            if (showFlug == false) {
                showFlug = true;
                slide.stop().animate({'marginLeft' : '0px'}, 200);
            }
        } else {
            if (showFlug) {
                showFlug = false;
                slide.stop().animate({'marginLeft' : winWidth+'px'}, 200);
            }
        }
    }
});

outerWidth(true)というのを初めて知りましたが、余白(margin、padding)を含めた横幅のサイズを取得できるのですね。ちなみにtrueなしのouterWidth()であれば、marginを含まない横幅のサイズを取得できるらしいです。

コンテンツの一番下の位置(正確に言えば、一番下までスクロールしたときの画面上の位置)を取得するには、$(document).height() – $(window).height()とすればよいのはなかなか興味深い。この取得方法は是非覚えておきたい。

10行目でどうしてこういうことしているのかがわからない。関数化しなくてもよいんじゃないのかな?

Java Script

$(window).scroll(function () {
   if ($(this).scrollTop() >= bottomPos) {
      slide.not(':animated').animate({'marginLeft' : '0px'}, 200);
   } else {
      slide.not(':animated').animate({'marginLeft' : winWidth+'px'}, 200);
   }
});

フッターを枠外に出すのに、$(‘#slide’).css(‘margin-left’, winWidth+’px’);としていますが、今回のように横幅が変わるようなときには、jQueryでCSSを指定するのが便利ですね。

閉じるボタンがついているのはユーザビリティ上よいと思います。これは単純に.hide()で隠せばよいわけですね。

これも知りませんでしたが、ウィンドウをリサイズする度に処理する便利な関数があるんですね!

これは.onを使って

Java Script

$(window).on('resize', function(){

});

とも書けるようです。