Sticky Mdtoolbar Inside Mdsidenavlayout

Sticky MdToolbar inside MdSidenavLayout

You should put the content scroll on the... content.
This is not only a workaround, I actually do it myself everytime I need this kind of layout because it fells more natural to have scrollbar inside the thing you're going to scroll in to. If the sidebar contents gets too big for example, it needs to have its own scroll context as well.

Not sure why the material team implemented it this way, but probably having a fixed toolbar will be the default behavior in the final version when using it with a sidenav layout (or at least we will have an option for it I hope).

Anyway, I've updated your plunker to show what I mean:
http://plnkr.co/edit/YViydOX9msbd8GJCGcm7?p=preview

You basically disable the scrolling on the sidenav content:

/*
 * The /deep/ selector is simply to overcome view encapsulation
 * and be able to select the div.md-sidenav-content generated at runtime
*/
md-sidenav-layout /deep/ .md-sidenav-content {
  overflow: hidden;
}

Then you just make .app-content fill the right height and set its overflow to auto:

.app-content {
  padding: 20px;
  height: calc(100% - 64px);
  overflow: auto;
}

Can md-toolbar be fixed top when inside md-sidenav-layout?

For anyone else struggling with this, the reason why it's difficult is because both md-sidenav-layout and md-sidenav-content both specify

transform: translate3d(0,0,0)

What this does is reset the coordinate system for child elements. This is a known 'issue' or consideration with using transform3d. The alternative we came up with was to site the md-toolbar outside the md-sidenav-layout like this:

<div style="position: fixed; width: 100%">
  <md-toolbar>...</md-toolbar>
</div>
<md-sidenav-layout style="top: 64px !important">...</md-sidenav-layout>

Doing the above gets the required effect of a fixed md-toolbar with a full screen layout.

See this SO for more info on the fixed/translate3d issue: 'transform3d' not working with position: fixed children

Position Fixed Not Working for Header

At the moment, Chrome cannot render position:fixed on elements under a transformation. Delete the (content-free)

-webkit-transform: translate3d(0, 0, 0);

and it will work.

Angular material sidenav and fixed toolbar

You have to use md-sidenav inside the md-content container. Plus try to use md-content instead of div tag. In your example you gave wrong values to layout-align attribute. Please check the appropriate values in the Docs.

Here is the basic structure for your requirement.

<md-content flex>
    <md-toolbar>
    </md-toolbar>

    <md-content layout="column" layout-fill>
        <!-- content -->

        <md-sidenav>
        </md-sidenav>
    </md-content>
</md-content>

here is the working pen. http://codepen.io/next1/pen/xOqMjy

Angular Material md-subheader not sticky

The sections fit inside md-content. So, when you scroll, you don't scroll inside md-content. In order for the stickiness to work, you should scroll inside of md-content.

I gave a height of 500px to md-content so that you can see the effect.

<md-content layout="column" layout-padding flex style="height: 500px;">

    <!-- Report content -->

    <section ng-repeat="i in [1,2,3,4,5]">

Here is the working codepen.

---

Related Topics