制作角材料固定侧导航答案

【问题标题】：making angular material fixed side-nav制作角材料固定侧导航
【发布时间】：2016-05-26 12:04:52
【问题描述】：

我想设计一个和官方 angular-material 网站一样的页面。当主要内容滚动时，工具栏和侧导航是固定的。我试图这样做几个小时，但没有取得任何成功。这是我的个人资料 html 模板 profile.html

<div layout="row" flex>
    <md-sidenav class="md-sidenav-left md-whiteframe-z2 profileSidenav" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
        <md-toolbar layout="row" class="md-hue-2">

            <h1 class="md-toolbar-tools" layout-align-gt-sm="center">Hello World</h1>
        </md-toolbar>
        <md-content>
            <div class="checkDiv">
                jello
            </div>
            <div class="checkDiv">
                jello
            </div>
            <div class="checkDiv">
                jello
            </div>
            <div class="checkDiv">
                jello
            </div>
            <div class="checkDiv">
                jello
            </div>
            <div class="checkDiv">
                jello
            </div>
        </md-content>
    </md-sidenav>





    <div layout="column" flex>
        <md-toolbar layout="row" class="profileToolBar">
            <button ng-click="toggleSidenav('left')" hide-gt-sm>
                <span class="visually-hidden">Menu</span>
            </button>
            <h1 class="md-toolbar-tools">Hello World</h1>
        </md-toolbar>
        <md-content layout="column" flex class="md-padding">
            <div class="checkDiv">
                jello
            </div>
            <div class="checkDiv">
                jello
            </div>
            <div class="checkDiv">
                jello
            </div>
        </md-content>
    </div>
</div>

sidenav 和工具栏已被赋予自定义类 position:fixed ；值，但在为 sidenav 固定位置后，工具栏和内容隐藏在其后面

【问题讨论】：

只需将高度 100% 添加到您的外部 div
还是同样的问题 :( ，一旦sidenav的位置固定了，整个工具栏和内容都会放在它后面
请添加一个codepen/plunkr。
为什么要添加position: fixed？反正已经修好了。
我添加的是固定位置，因为它默认是静态的

标签： angularjs angular-material

【解决方案1】：

我用这段代码解决了这个问题：

index.html:

<body layout="column">

    <div flex layout="column" ng-include="'app/layout/shell.html'"></div>
</body>

shell.html

<div layout="row" flex style="height: inherit; overflow: hidden; background-color: transparent" ng-controller="Shell" layout-fill class="fondo">
    <div ng-include="'app/layout/left-side-nav.html'"></div>
    <md-content flex layout="column" role="main"   style="height: inherit; background-color: transparent; " class="">
        <div ng-include="'app/layout/app-toolbar.html'"></div>
        <div layout="row"  layout-align="space-around" ng-if="dataLoading.init" class="loader">
            <md-progress-circular class="md-accent" md-mode="indeterminate"></md-progress-circular>
        </div>
        <md-content flex  style="background-color: transparent; flex-direction: column;" ng-hide="dataLoading.init" >
            <div   ui-view="main"   class="noscrollbar"  style=" margin:auto"></div>
        </md-content>
    </md-content>
    <div ng-include="'app/layout/right-side-nav.html'"></div>
</div>

【讨论】：

【解决方案2】：

在<md-sidenav> 标记上使用此属性md-is-locked-open="true"。

【讨论】：

【解决方案3】：

你可以使用 $mdSticky 来固定元素

app.directive('sticky', function($mdSticky, $compile) {
    var SELECT_TEMPLATE =
      '<md-content><md-card layout="column"> <md-card-content> <h2>Card headline</h2> <p>Card content</p> </md-card-content> <md-card-footer> Card footer </md-card-footer> <div class="md-actions" layout="column"> <md-button>content</md-button> </div> </md-card> <md-card layout="column"> <md-card-content> <h2>Card headline</h2> <p>Card content</p> </md-card-content> <md-card-footer> Card footer </md-card-footer> <div class="md-actions" layout="column"> <md-button>content</md-button> </div> </md-card> </md-content>';
    return {
      restrict: 'A',
      replace: true,
      //template: SELECT_TEMPLATE, // you can use template HTML or load HTML with templateURL as we do it in next line
      templateUrl:appInfo.template_directory+'templates/sticky-sidebar.directive.html',
      link: function(scope,element) {
        $mdSticky(scope, element, $compile(SELECT_TEMPLATE)(scope));
      }
    };
  });

如此处所述： https://www.coditty.com/code/angular-material-how-to-make-custom-elements-sticky-using-mdsticky

【讨论】：