- ベストアンサー
【jQuery】if else文の合体
- ２カラムレイアウトでサイドナビを途中で固定し、フッター手前で固定解除するjQueryを実現したい。
- 既存のコードでは要件を満たせなかったため、２つのコードを合体させたがうまく動作しない。
- HTMLのレイアウトには<wrap>で<side-nav>と<content>を包まなければならない要件がある。
- ganggg
- お礼率90% (9/10)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
A No1です。 お礼を読みましたが、やりたいことがよくわかりません。 ご質問文の図解とhtmlの構成を参考に作成してみたのですが・・・ ＞position:absoluteで絶対位置指定しておかないと機能しないのですね。 最初にご提示のようなposition:fixでの方法もあるかと思いますが、結局、この指定と違う動作をさせる時に、position:absoluteなどにしているので、単純化しているだけです。 ＞コードの意味を調べたり、～～ 数行のコードなので、大して難しくはないと思いますが、念のため説明しておきますと、 移動したい部分（今回の場合は#side-navと解釈）の縦の位置指定をすれば良いだけですので、移動可能な範囲（縦位置の最小値、最大値）を求めておいて、その中で位置を指定しているだけです。計算上範囲からはみ出した場合は、最大値（又は最小値）にセットしているだけです。 よくわかりませんが、こういうこと？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> html, body{ margin:0; padding:0; } .header{ height:100px; background-color:#aff; } .content{ height:1000px; background-color: #ddd; } .footer{ clear:both; height:50px; background-color:#ffa; } #side-bar{ width:150px; float:left; background-color: #ffa; } #side-nav{ position:absolute; width:150px; left:0; background-color:#faf; list-style-type:none; margin:0; padding:0; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var nav = $("#side-nav"); //移動する部分の要素を取得 //位置調整関数 var adjust = function(){ var sTop = $(window).scrollTop(); //全体のスクロール量 var sMin = $("#side-bar").offset().top + $("#side-bar").height(); //縦位置の最小値 var sMax = $(".footer").offset().top - nav.height(); //縦位置の最大値 nav.css("top", Math.min(Math.max(sTop, sMin), sMax)); //要素の縦位置を設定 } //スクロール時、リサイズ時のイベント設定 $(window).scroll(function(){ adjust(); }) .resize(function(){ adjust(); }); //初期設定での位置調整表示 adjust(); }); </script> </head> <body> <div class="header"> header略 </div> <div id="side-bar"> <ul> <li>スクロールされるメニュー1</li> <li>スクロールされるメニュー2</li> <li>スクロールされるメニュー3</li> </ul> </div> <ul id="side-nav"> <li>navi1 略</li> <li>navi2 略</li> <li>navi3 略</li> </ul> <div class="content"> content略 </div> <div class="footer"> footer </div> </body> </html>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
回答がないみたいなので… headerとfooterにかからない範囲で、side-navを上下に移動させたいということと解釈しました。 headerをabsoluteにする必然性がないのと、どうせスクリプトに頼ることになるのですから、side-navだけをabsoluteにしておいて、スクリプトで上下に移動するという方式にしています。 最初に計算をしておいても良いのですが、ブラウザのサイズをリサイズすると計算値が変わる可能性があるので、都度計算するようにしています。 ＊HTML4.01になっていますので、HTML5にする場合は適宜修正を。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> html, body{ margin:0; padding:0; } .header{ height:100px; background-color:#aff; } .content{ height:1000px; margin-left:100px; } .footer{ height:50px; background-color:#ffa; } #side-nav{ position:absolute; width:100px; top:100px; left:0; background-color:#faf; list-style-type:none; margin:0; padding:0; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var nav = $("#side-nav"); var adjust = function(){ var sTop = $(window).scrollTop(); var sMin = $(".header").height() var sMax = $(".footer").offset().top - nav.height(); nav.css("top", Math.min(Math.max(sTop, sMin), sMax)); } $(window).scroll(function(){ adjust(); }) .resize(function(){ adjust(); }); }); </script> </head> <body> <div class="header"> header略 </div> <ul id="side-nav"> <li>navi1 略</li> <li>navi2 略</li> <li>navi3 略</li> </ul> <div class="content"> content略 </div> <div class="footer"> footer </div> </body> </html>
お礼
回答ありがとうございます。 ご返事遅くなってしまいスミマセン。 ご提案下さったコードを元に コードの意味を調べたり、 色々いじくって自分なりに検証しておりました。 position:absoluteで 絶対位置指定しておかないと機能しないのですね。 サイドナビの途中から固定したいもので、 <div id="side-bar"> <ul> <li>スクロールされるメニュー1</li> <li>スクロールされるメニュー2</li> <li>スクロールされるメニュー3</li> </ul> <ul id="side-nav"> <li>navi1 略</li> <li>navi2 略</li> <li>navi3 略</li> </ul> </div> こんな風にDIVで囲ってみると、 スクロールされるメニューと重なってしまって <div id="side-bar"> <ul> <li>スクロールされるメニュー1</li> <li>スクロールされるメニュー2</li> <li>スクロールされるメニュー3</li> </ul> <div id="relative"> <ul id="side-nav"> <li>navi1 略</li> <li>navi2 略</li> <li>navi3 略</li> </ul> </div> </div> と<ul id="side-nav">の親要素として さらにDIVを追加し、position:relative;を指定すると 今度はside-nav自体が表示されなくなったりでお手上げ状態なんです。。 どうも相談内容が悪かったのか、なかなか回答も頂けないので 半ば諦めモードなんですが 締め切らずにもう少しだけ待ってみようと思います。 ご回答ありがとうございました。
お礼
２度もご回答ありがとうございます。 今回ご提示下さったコードで正常に動作させる事が出来ました。 配布されているjQueryをそのまま使っているような人間ですので 数行の簡単なコードでも//補足コメントはありがたいです。 ネットで探し回ったコードよりもシンプルな記述ですし、 希望していた動作通りに機能するので非常に感謝しております。 ご親切にありがとうございました。