Question

我想像官方角料网站一样设计一个页面。当主要内容滚动时，工具栏和侧面导航是固定的。我试图这样做几个小时但没有取得任何成功。这是我的个人资料的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和toolbar已经被赋予定位类，其位置为：fixed;值，但在为sidenav固定位置后，工具栏和内容隐藏在它后面

Answer 1

你可以使用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

Answer 2

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

的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>

Answer 3

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

使角度材料固定侧导航

3 个答案: