質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

1873閲覧

サイドバーが追尾し、そのセクションを指しているときにCSSを有効にする方法

fnwakc

総合スコア15

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/11/30 01:51

サイドバーが追尾し、そのセクションを指しているときにCSSを有効にする方法を試しています。
「div.section」が頭に来た時に左のサイドメニューのクラスが有効になるようにしていますが、「div.section」の高さが足りないと、有効にできません。最後にくる「div.section」の高さが低くても有効にする方法はないでしょうか。

また、アンカーから飛んで来た時や、そのアンカーでリロードしたときにサイドバーが消えてしまいます。CSSを有効にしつつ、表示はできますでしょうか。

宜しくお願いいたします。

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" /> <style> body{ width:100%; margin:0; padding:0; color:#000000; letter-spacing: 0.05em; position:relative; line-height:1.4em; -webkit-text-size-adjust:none;/*iPhone Landscape文字サイズ固定 */ } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #wrapper { width:100%; clear:both; padding-bottom:80px; margin:20px 0px 0px 0px;} #wrapper .wrapper-in { width:1000px; margin:0px auto; } #wrapper #wrpper-side { position:relative; padding-top:0px; } .section { overflow:hidden; padding:0px; clear:both; border:1px solid #CCC; } .section-in { clear:both; padding:20px; } #main{ width:760px; float:right; min-height:250px; } #sideWrap { width:220px; float:left; position:absolute; padding: 0px 0px 0px 0px; top: 0px; left: 0px; font-size:16px; } #side { padding:0px 0px 20px 0px; margin-top:0px; width:220px; } #side ul { margin: 0; padding: 0; list-style: none; } #side li { background:#E1E7EF; border-bottom:1px solid #FFFFFF; } #side li.on { background:#004DB3; } #side li.on a { color:#FFF !important;} #side li a { display:table-cell; vertical-align:middle; height:48px; font-size:120%; width:100%; padding-left:20px; text-decoration:none; width:220px;} #side li a:hover { background:#1668C1; color:#FFFFFF; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(window).load(function () { var mainArea = $("#main"); var sideWrap = $("#sideWrap"); var sideArea = $("#side"); var wd = $(window); var mainH = mainArea.height(); var sideH = sideWrap.height(); if(sideH < mainH) { sideWrap.css({"height": mainH,"position": "relative"}); var sideOver = wd.height()-sideArea.height(); var starPoint = sideArea.offset().top + (-sideOver); var breakPoint = sideArea.offset().top + mainH; wd.scroll(function() { 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"); } }else{ var sideBtm = wd.scrollTop() + sideArea.height(); if(mainArea.offset().top < wd.scrollTop() && sideBtm < breakPoint){ sideArea.css({"position": "fixed", "top": "20px"}); }else if(sideBtm >= breakPoint){ var fixedSide = mainH - sideH; sideArea.css({"position": "absolute", "top": fixedSide}); } else { sideArea.css("position", "static"); } } }); } }); </script> <script language="javascript" > $(function(){ var margin = 100, //ウインドウ上部からどれぐらいの位置で変化させるか sectionTop = new Array, //sectionのTop位置格納用 current = -1; //現在のカレント位置 //(1)各sectionの縦位置を取得 $('.section').each(function(i) { sectionTop[i] = $(this).offset().top; }); //init changeNavCurrent(0); //スクロールした時の処理 $(window).scroll(function(){ scrollY = $(window).scrollTop(); //(2)各セクションの位置とスクロール位置を比較して、条件にあったらchangeNavCurrentを実行 for (var i = sectionTop.length - 1 ; i >= 0; i--) { if (scrollY > sectionTop[i] - margin) { changeNavCurrent(i); break; } }; }); //(3)ナビの処理 function changeNavCurrent(curNum) { if (curNum != current) { current = curNum; curNum2 = curNum + 1;//HTML順序用 $('#side ul li').removeClass('on'); $('#side ul li:nth-child(' + curNum2 +')').addClass('on'); } }; }); </script> </head> <body> <div id="header" style="height:200px; background:#004DB3;"> header </div> <!-- header --> <div id="wrapper"> <div class="wrapper-in"> <div id="wrpper-side" class="cf"> <div id="main"> <div class="section" id="01"> <h2 class="title2"><span>セクション01</span></h2> <div class="section-in" style="height:400px;"> <p>セクション01</p> </div><!-- section-in END --> </div><!-- section END --> <div class="section mt20" id="02"> <h2 class="title2"><span>セクション02</span></h2> <div class="section-in" style="height:500px;"> <p>セクション02</p> </div><!-- section-in END --> </div><!-- section END --> <div class="section mt20" id="03"> <h2 class="title2"><span>セクション03</span></h2> <div class="section-in" style="height:300px;"> セクション04 </div><!-- section-in END --> </div><!-- section END --> <div class="section mt20" id="04"> <h2 class="title2"><span>セクション04</span></h2> <div class="section-in"> セクション04 </div><!-- section-in END --> </div><!-- section END --> </div><!-- main END --> <div id="sideWrap"> <div id="side"> <ul> <li><a href="#01">メニュー#01</a></li> <li><a href="#02">メニュー#02</a></li> <li><a href="#03">メニュー#03</a></li> <li><a href="#04">メニュー#04</a></li> </ul> </div><!-- side END--> </div><!-- sideWrap END --> </div><!-- wrpper-side END --> </div><!-- wrapper-in END --> </div><!-- wrapper END --> <div id="footer" style="height:200px; background:#004DB3; clear:both;"> フッター </div> <!-- #footer END --> </body> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

サイドバーが追尾し、そのセクションを指しているときにCSSを有効にする方法を試しています。
「div.section」が頭に来た時に左のサイドメニューのクラスが有効になるようにしていますが、「div.section」の高さが足りないと、有効にできません。最後にくる「div.section」の高さが低くても有効にする方法はないでしょうか。

閲覧しているディスプレイの大きさに依存する部分なのである程度コンテンツ量がないと厳しいかと思います。
やるとすれば、予めfooterとsection4(コンテンツ)の間のmarginをつけてあげるとかですかね...。

また、アンカーから飛んで来た時や、そのアンカーでリロードしたときにサイドバーが消えてしまいます。CSSを有効にしつつ、表示はできますでしょうか。

おそらくIEだと思いますが、ローカルのファイルを直接開いているからだと思います。
ローカルサーバーを立ち上げるかサーバーにファイルを上げた際には、機能すると思います。
(ちなみにChromeやFirefoxだと機能しております。)

以下のようなメッセージは出ていないでしょうか?
【このwebページはスクリプトやActiveX コントロールを実行しないように制限されております。】

⇒無効化する方法
http://know-how-tree.com/archives/1307

投稿2016/12/20 01:24

takumaro_web

総合スコア301

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

fnwakc

2016/12/20 02:00

やはり、高さを変えるしかないですよね。 ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問