[ 勉強 ] 下部までスクロールすると右下に配置したコンテンツが開くjQuery

人様のソースコードを読み解くシリーズです。前回の続き、その4です。前回から随分、時間が空いてしまいました…。

下部までスクロールすると右下に配置したコンテンツが開く

Java Script

$(function() {
   var slide = $('#slide');
   var contents = $('#slide-contents');
   //開くボタン
   var openBtn = $('#open-btn img');
   var btnOpenFlag = false;
   var openFlag = false;
   var panelSwitch = function() {
      //閉じる
      if (openFlag == true ) {
         slide.stop().animate({'width' : '200px','height' : '30px'}, 500);
         openBtn.show();      //開くボタンにする
      }
      //開く
      else if (openFlag == false) {
         slide.stop().animate({'width' : '400px','height' : '200px'}, 500);
         openBtn.hide();      //閉じるボタンにする
      }
   };
   //開くボタンクリックしたら
   $('#open-btn').click(function(){
      panelSwitch();
      openFlag = !openFlag;
      btnOpenFlag = true;
   });
   //画面下位置を取得
   var bottomPos = $(document).height() - $(window).height() - 500;
   $(window).scroll(function () {
      if (!btnOpenFlag) {
         if ($(this).scrollTop() >= bottomPos) {
            if (openFlag == false) {
               panelSwitch();
               openFlag = true;
            }
         } else {
            if (openFlag) {
               panelSwitch();
               openFlag = false;
            }
         }
      }
   });
});

コンテンツが表示されているか、ボタンがクリックされたか、を判定するフラグが肝のようですね。

うむー、いっぱいif文があってよくわからなくなる。特に『//画面下位置を取得』のところのif文はどうにかならないだろうか。

動作としては、

  1. 画面の右下にコンテンツを配置
  2. 開くボタンをクリックすると、閉じるボタンに変更して、コンテンツは開く
  3. 閉じるボタンをクリックすると、開くボタンに変更して、コンテンツは閉じる
  4. 下までスクロールしたら、自動的にコンテンツを開く
  5. 一度、開くボタンを使用したら、スクロールしてもコンテンツは開かない

色々試してみましたが、よい方法が見つからない…。