Dittmar Consulting Dittmar Consulting - 6 months ago 305
AngularJS Question

AngularJS - make md-toolbar sticky and pages within ng-view scrollable

I have prepared a Plunkr example but I need help with scrolling of the pages inside the ng-view directive.

Please start the application in Chrome and open the Dev Tools and click on the mobile view. Perhaps, select the smallest screen size - iPhone5.

https://embed.plnkr.co/WXtQxVcdgyvnaajbs4eJ/

Right now md-toolbar is scrolling with the entire site but I want to make it sticky to the top while all pages inside the ng-view directive should be scrollable.

Thanks in advance.

Answer

Just change your md-toolbar element to:

  <md-toolbar style="position: fixed;">

or define a css class for fixed and apply the style to your toolbar.