如何在向下滚动页面时固定左侧边栏

时间:2015-10-29 04:53:51

标签: html

我有一个左侧边栏和一个主菜单.....我需要在向下滚动页面时保持左侧边栏固定....但我没有得到它。 这是我的代码 任何人都可以帮我怎么做?

<div class="nav-wrapper">
           <!-- START Left navbar-->
           <ul class="nav navbar-nav">

              <li>
                 <!-- Button used to collapse the left sidebar. Only visible on tablet and desktops-->
                 <a href="" data-toggle-state="aside-collapsed" class="hidden-xs">
                    <em class="fa fa-navicon"></em>
                 </a>
                 <!-- Button to show/hide the sidebar on mobile. Visible on mobile only.-->
                 <a href="" data-toggle-state="aside-toggled" data-no-persist="true" class="visible-xs sidebar-toggle">
                    <em class="fa fa-navicon"></em>
                 </a>
              </li>
           </ul>
           <!-- END Left navbar-->
           <!-- START Right Navbar-->
           <ul class="nav navbar-nav navbar-right">
              <!-- <li>
                 <a href="" data-search-open="">
                    <em class="icon-magnifier"></em>
                 </a>
              </li> -->
              <!-- Fullscreen (only desktops)-->
              <!-- <li class="visible-lg">
                 <a href="" data-toggle-fullscreen="">
                    <em class="fa fa-expand"></em>
                 </a>
              </li> -->
              <li  class="dropdown user">
                <!-- <span style="color: #ddd;"></span> -->
                 <a title="Log Out" style="text-decoration: none; box-shadow:0px 0px 0px; cursor: pointer;" class="dropdown-toggle"
                data-toggle="dropdown" data-hover="dropdown"
                data-close-others="true">
                    {{loggedInUser.userFirstName}} {{loggedInUser.userLastName}} &nbsp;&nbsp; <i class="fa fa-angle-down"></i>

                 </a>
                 <ul class="dropdown-menu">
                        <li><a href="" ng-click="logOut()"><i class="fa fa-sign-out"></i> Log Out</a></li>
                </ul>
              </li>
           </ul>
        </div> 

1 个答案:

答案 0 :(得分:0)

在左侧使用position:fixed;overflow:auto;。您可能需要调整正确的位置。使用右侧面板上的position:relative;