下記リンクを参考にスクロールを作成したのですが
メイン部分がJSにより長さが変わることがある(例:クリック押下でheightが伸びる等)ため、うまく動作しません。
理想としては、サイドバーは常に上に固定され、かつメイン部分のボトムまできたら下に固定されることなのですが、、、、
メインの長さが動的に変化する場合、どのように対処したらよいでしょうか。
lang
1$(window).load(function () { 2 3 //該当のセレクタなどを代入 4 5 var mainArea = $("#main"); //メインコンテンツ 6 var sideWrap = $("#sideWrap"); //サイドバーの外枠 7 var sideArea = $("#side"); //サイドバー 8 9 /*設定ここまで*/ 10 11 var wd = $(window); //ウィンドウ自体 12 13 14 //メインとサイドの高さを比べる 15 16 var mainH = mainArea.height(); 17 var sideH = sideWrap.height(); 18 19 20 if(sideH < mainH) { //メインの方が高ければ色々処理する 21 22 //サイドバーの外枠をメインと同じ高さにしてrelaltiveに(#sideをポジションで上や下に固定するため) 23 sideWrap.css({"height": mainH,"position": "relative"}); 24 25 //サイドバーがウィンドウよりいくらはみ出してるか 26 var sideOver = wd.height()-sideArea.height(); 27 28 //固定を開始する位置 = サイドバーの座標+はみ出す距離 29 var starPoint = sideArea.offset().top + (-sideOver); 30 31 //固定を解除する位置 = メインコンテンツの終点 32 var breakPoint = sideArea.offset().top + mainH; 33 34 wd.scroll(function() { //スクロール中の処理 35 36 if(wd.height() < sideArea.height()){ //サイドメニューが画面より大きい場合 37 if(starPoint < wd.scrollTop() && wd.scrollTop() + wd.height() < breakPoint){ //固定範囲内 38 sideArea.css({"position": "fixed", "bottom": "20px"}); 39 40 }else if(wd.scrollTop() + wd.height() >= breakPoint){ //固定解除位置を超えた時 41 sideArea.css({"position": "absolute", "bottom": "0"}); 42 43 } else { //その他、上に戻った時 44 sideArea.css("position", "static"); 45 46 } 47 48 }else{ //サイドメニューが画面より小さい場合 49 50 var sideBtm = wd.scrollTop() + sideArea.height(); //サイドメニューの終点 51 52 if(mainArea.offset().top < wd.scrollTop() && sideBtm < breakPoint){ //固定範囲内 53 sideArea.css({"position": "fixed", "top": "20px"}); 54 55 }else if(sideBtm >= breakPoint){ //固定解除位置を超えた時 56 57 //サイドバー固定場所(bottom指定すると不具合が出るのでtopからの固定位置を算出する) 58 var fixedSide = mainH - sideH; 59 60 sideArea.css({"position": "absolute", "top": fixedSide}); 61 62 } else { 63 sideArea.css("position", "static"); 64 } 65 } 66 67 68 }); 69 70 } 71 72});
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/06/18 01:15