twitter-bootstrap – Bootstrap 3 Off-Canvas边栏菜单就像Faceb

如何将画布外的菜单调整为像Facebook的搜索/朋友在线画外菜单一样,它总是从菜单顶部开始,你只能滚动？与我的示例一样,导航栏是固定的,因此可以切换侧边栏菜单.但是当您向下滚动实际页面并切换菜单时,您必须向上滚动以查看链接.我想看看如何将其调整到菜单从顶部开始的位置并将内容和固定导航栏推到一边,同时能够在菜单内滚动而不是内容？

CSS：

html,body { overflow-x: hidden; }
    body { padding-top: 70px;}
    .navbar { color: #FFF; }
    footer { padding: 30px 0; }


    /*
    * Off Canvas
    * --------------------------------------------------
    */
    @media screen and (max-width: 767px) {
       .row-offcanvas { position: relative; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out;  }

       .row-offcanvas-right
       .sidebar-offcanvas { right: -50%; /* 6 columns */ }

       .row-offcanvas-left
       .sidebar-offcanvas { left: -50%; /* 6 columns */ }

       .row-offcanvas-right.active { right: 50%; /* 6 columns */ }

       .row-offcanvas-left.active { left: 50%; /* 6 columns */ }

       .sidebar-offcanvas { position: absolute; top: 0; width: 50%; /* 6 columns */ }
    }

HTML：

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <p class="pull-left visible-xs">
                <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
            </p>

            <div class="col-xs-2 col-lg-3">
                <p>LOGO</p>
            </div>
            <div class="col-xs-6 col-lg-5">
                <p>SEARCH BAR</p>
            </div>
            <div class="col-xs-4 col-lg-4">
                <p>TWO LINKS</p>
            </div>
        </div>


        <div class="row row-offcanvas row-offcanvas-left">
            <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
                <div class="list-group">
                    <a href="#" class="list-group-item active">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                </div>
            </div><!--/span-->

            <div class="col-xs-12 col-sm-9">
                <div class="jumbotron">
                    <h1>Hello,world!</h1>
                    <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
                </div>
                <div class="row">
                    <div class="col-6 col-sm-6 col-lg-4">
                        <h2>Heading</h2>
                        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus,tellus ac cursus commodo,tortor mauris condimentum nibh,ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                        <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
                    </div><!--/span-->
                    <div class="col-6 col-sm-6 col-lg-4">
                        <h2>Heading</h2>
                        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus,ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                        <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
                    </div><!--/span-->
                </div><!--/row-->
            </div>
        </div><!--/row /row-offcanvas-left-->

        <hr>

        <footer>
        <p>&copy; Company 2013</p>
        </footer>