レスポンシブルでなければ全然いける
サイドバーも%でしていしてるから
fixedすると 100%では画面全体の%になっっちやう。
ピクセル指定でははみ出ちゃおう
一応方法は
1 | <script type= "text/javascript" src= "/js/side-fixed-comment.js" ></script> |
こいつを入れて
1 2 3 | var mainArea = $( "#main_contents" ); //メインコンテンツ var sideWrap = $( "#d_sidenavi" ); //サイドバーの外枠 var sideArea = $( "#d_sidenavi_in" ); //サイドバー |
これを指定するだけ。
1 2 3 4 5 6 7 8 9 10 11 | if (wd.height() < sideArea.height()){ //サイドメニューが画面より大きい場合 if (starPoint < wd.scrollTop() && wd.scrollTop() + wd.height() < breakPoint){ //固定範囲内 sideArea.css({ "position" : "fixed" , "bottom" : "20px" }); } else if (wd.scrollTop() + wd.height() >= breakPoint){ //固定解除位置を超えた時 sideArea.css({ "position" : "absolute" , "bottom" : "0" }); } else { //その他、上に戻った時 sideArea.css( "position" , "static" ); } |
この辺をいじってほしい所まで言ったが
24.5%を足す
他は100%に戻す
cssでmaxwidth 280pxにする
fixedはwind100%でやってくるから
どうちゃっても
全く同じサイズにできん。
スクリプトを読み込ませない
ってやつやったけど
一度読み込んだjsをクリアする方法がみつからず断念
ウインドウサイズ小で
ロード時読み込ませないことはできたが
1200まで大きくして読み込んだが
また小さくしたときに
も読み込んでて
だめやった。
4・5時間はまって寝る前に考えた計算でできた。
天才花道
まず
普通に
ヘッダ
1 | <script type= "text/javascript" src= "/js/side-fixed-comment.js" ></script> |
side-fixed-comment.js
1 2 3 | var mainArea = $( "#main_contents" ); //メインコンテンツ var sideWrap = $( "#d_sidenavi" ); //サイドバーの外枠 var sideArea = $( "#d_sidenavi_in" ); //サイドバー |
css 場所ブログアフター
1 2 3 | @media screen and ( min-width : 1200px ) {#d_sidenavi_in{ max-width : 280px ;}} @media screen and ( max-width : 1000px ){#d_sidenavi_in{ max-width : 231px ; min-width : 231px ;}} |
これで1200px以上1000PX以下の設定
あとは1000から1200までを取得する
ヘッダside-fixed-comment.jsより下(いみある?)
1 2 3 4 5 6 | <script type= "text/javascript" > $(window).on( 'load resize' , function (){ var w = ($(window).width() -56) * 0.25 ; $( '#d_sidenavi_in' ).width(w); }); </script> |
1 2 3 4 5 6 7 8 9 | <script type= "text/javascript" > $(window).on( 'load resize' , function (){ //読み込み時とリサイズ時を同時に処理する var w = ($(window).width() -56) * 0.245 ; //wにウインドウサイズを取得して 俺が作っているホームページのサイドバーより上のdivのマージンがピクセルで指定してあるからそれをマイナスして(-56) レスポンシブでサイドバーは24.5%で作成してあるから、それを掛けた(* 0.245) サイズいわゆる サイドバーのあるべきサイズを取得する $( '#d_sidenavi_in' ).width(w); }); //fixedになって親がいなくなった(画面全体になった)サイドバーに値を入れる。 </script> |
※ここで重要なのが予め 変動値以外のサイズ 1000以下にはmin-width 1200以上にはmax-widthをしていしておく
参考
http://qiita.com/drapon/items/328b1ed23490061e6fdb
この書き方だと要素にwidth=がついて イメージなどではしていできるだろうが
今回か書き方をかえた
これ参考http://qiita.com/blogger323/items/811f42f8283889071be7
ここから引き抜いた
1 2 3 | $( '#sidebar' ).css( 'width' , '' ); w = $( '#sidebvar' ).width(); $( '#sidebar' ).width(w); |
演算子
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators
こんな書き方もできるだろう
http://bl6.jp/web/javascript/change-process-get-window-size/
処理
1 2 3 | $( '#sample' ).css({ color: 'red' }); |