bootstrap3 affix 追随固定メニュー

2014年11月18日更新 view: 1158 view
photoBy: http://designup.jp/wp/wp-content/uploads/2014/01/…

せっかくなのでbootstrap3の固定メニューを使ってみる

ページを移動した時に自動的に追随してくるメニューを作るには。
コピペで動く。

ページ最上部にトップ固定

これで画面を下の方にスクロールしても高さが固定される

<style>

    #nav.affix {
        position: fixed;
        top: 0;
        width: 100%
    }


</style>


<script>

    $(function () {
        $('#nav').affix({
        });
    });

</script>

<body>






    <div class="navbar navbar-default" id="nav">
        このメニューが固定される
    </div>

    <div class="container">
        <div class="row">
            <div class="span12">
                <div class="well">
                    <h1> Header </h1>
                </div>
            </div>
        </div>
    </div>


    <div class="container">
        <div class="span3">
            <p style="height:3000px;padding:10px;">
             ダミーで高さを指定
            </p>
        </div>
    </div>

</body>

ページ左側に固定

<style>


    .affix-top,.affix{
        position: static;
    }

    #sidebar.affix-top {
        position: static;
    }

    #sidebar.affix {
        position: fixed;
    }



</style>




<body>

<div class="container">
    <div class="row">
        <div class="col-md-4 column">
            <ul id="sidebar" class="nav nav-stacked" data-spy="affix">
                <li><a href="#software"><b>Software</b></a></li>
                <ul>
                    <li><a href="#features">Features</a></li>
                    <li><a href="#benefits">Benefits</a></li>
                    <li><a href="#costs">Costs</a></li>
                </ul>

            </ul>

        </div>
        <div class="col-md-8 column" style="height: 4000px;">
            <p>
                左メニューがついてくるお
            </p>
        </div>
    </div>
</div>





</body>

上メニューも左メニューも追随させたい

bootstrapの追随はなんかおかしい。
ということで、上も左も固定して動かす場合は、
http://matomater.com/413/

も併用する。

上メニューも左メニューも追随させよう

上メニューはbootstrapのaffix。
サイドメニューは ex flex fiexd を使う。
で、上メニュー分スクロールされたら左メニューの上が隠れてしまうので、その分margin-topを追加して
隠れないようにする。

$('#curation-head-menu').affix({
            });

            $('#side').exFlexFixed({
                container : 'body'
            });

            var outerHight = $("#curation-head-menu").outerHeight();
            $(window).scroll(function(){
                // スクロール位置が100を超えた場合
                if ($(this).scrollTop() > $("#curation-head-menu").height()) {
                    $('#side').css('margin-top',outerHight + 21);
                } else {
                    $('#side').css('margin-top',0);
                }
            });

スポンサードリンク

 

 

 

 

 

スポンサードリンク

関連記事

関連カテゴリ

コロ助

web関連の記事や制作系の記事をどんどんまとめていきます。 宜しくお願いします!

ピックアップ

パソコン・ソフトウェア ランキング

4月27日 ( 木 ) にアクセスが多かった記事はこちら!