Css 使用角度材料的粘性右侧导航

我试图得到一个固定的右侧边栏使用角材料随着一个固定的工具栏在顶部。我似乎遗漏了一些根本不起作用的东西。我试着用它做一支笔，请告诉我如何修理它。 以下是我的md内容代码

<md-content flex class='md-padding' layout="column">
    <md-card ng-repeat = "card in cards">
      {{card.title}}
      {{card.text}}
    </md-card>
    <md-sidenav flex md-component-id="right" md-is-locked-open="true" class="md-sidenav-right md-whiteframe-z2">
        <md-content layout="column">
            <div flex>
               <md-button href="http://google.com"> Button </md-button>
            </div>
            <div flex>
               <md-button href="http://google.com"> Button </md-button>
            </div>
        </md-content>
    </md-sidenav>
</md-content>

`

---

试试这样的。我将sidenav和内容设置为布局行。从md sidenav中删除了flex属性，并将其分配到1/3和2/3布局中[flex=33和flex=66]

<md-content layout="row">
  <md-sidenav md-component-id="right" md-is-locked-open="true" class="md-sidenav-right md-whiteframe-z2" flex="33">
    <md-content layout="column">
      <div flex>
        <md-button href="http://google.com"> Button </md-button>
      </div>
      <div flex>
        <md-button href="http://google.com"> Button </md-button>
      </div>
      <div flex>
        <md-button href="http://google.com"> Button </md-button>
      </div>
      <div flex>
        <md-button href="http://google.com"> Button </md-button>
      </div>
    </md-content>
  </md-sidenav>
  <md-content flex="66">
  <md-card ng-repeat="card in cards">
    {{card.title}} {{card.text}}
  </md-card>
  </md-content>
</md-content>

在md卡周围添加了一个div repeat，并将md sidenav放在其旁边。

---

还从主体标记中删除了布局。这使得侧导航可以弯曲到页面底部。

您可以尝试使用$mdSticky服务，从角度材料开始

(function() {
  angular.module('example', ['ngMaterial']);
})();

 (function() {
  angular.module('example').directive('sticky', Sticky);

    Sticky.$inject = [ '$mdSticky' ];

    function Sticky($mdSticky) {
        return {
            restrict : 'A',
            link : function(scope, element) {
                $mdSticky(scope, element);
            }
        }
    }
})();

代码笔示例

教程可在此处找到：

---

除了在内容区域创建滚动条而不是整个页面的滚动条之外，这几乎是好的。有什么办法可以解决这个问题吗。我已经用您建议的更改修改了代码笔。谢谢你的回复。然而，这确实删除了滚动条，但它删除了固定工具栏，甚至sidenav栏也不固定。我通过更新代码笔尝试了它。哦，很抱歉，将body标记更改为以下内容，以使导航栏保持固定，因为是父属性决定要使sidenav保持粘性，您需要添加一些css元素。不要认为有棱角的材料提供了现成的。

(function() {
  angular.module('example', ['ngMaterial']);
})();

 (function() {
  angular.module('example').directive('sticky', Sticky);

    Sticky.$inject = [ '$mdSticky' ];

    function Sticky($mdSticky) {
        return {
            restrict : 'A',
            link : function(scope, element) {
                $mdSticky(scope, element);
            }
        }
    }
})();