It's been a challenge for me to get the md-toolbar to stay in the top position. I decided to create a custom directive using the $mdSticky service in AngularJS.
var app=angular.module('app',['ngMaterial']);
app.controller('test',function(){
});
app.directive('sticky', Sticky)
function Sticky($mdSticky) {
return {
restrict: 'A',
link: function (scope, element) {
$mdSticky(scope, element);
console.log('log sticky..');
}
}
}<html ng-app="app">
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.min.css" rel="stylesheet"/>
</head>
<body>
<div>
<md-toolbar class="md-hue-2" md-whiteframe="2" sticky>
<h1>testing sticky</h1>
</md-toolbar>
<md-content>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tortor magna, ornare ut ipsum vitae, venenatis fermentum est. Vestibulum viverra augue at venenatis rutrum. Duis iaculis et mi eget pharetra. Curabitur a faucibus est. Nulla ...rest of text unchanged...