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

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

ただいまの
回答率

89.10%

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

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,062

fnwakc

score 15

サイドバーが追尾し、そのセクションを指しているときに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>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+1

サイドバーが追尾し、そのセクションを指しているときに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 11:00

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

    キャンセル

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

  • ただいまの回答率 89.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる