2016-03-23 16 views
0

Ich benutze mehrere <md-subheader> s auf meiner Seite, aber sie bleiben nicht an der Spitze, wenn der Benutzer scrollt nach unten (wie in der demo).Angular Material md-subheader nicht klebrig

Irgendwelche Ideen? Vielleicht verursacht mein Layout das Problem?

<body> 
    <div> 
    <md-toolbar> 
    <div> 
     <md-sidenav> 
     <md-content> 
     <section> 
      <md-subheader> 
... 

Hier ist ein codepen.


auf einem anderen question I had Basierend, nur layout="column" layout-fill in den oberen div Werke hinzufügen, auch.

Antwort

1

Die section s passen in md-content. Wenn Sie also blättern, scrollen Sie nicht innerhalb von md-content. Damit die Klebrigkeit funktioniert, sollten Sie innerhalb von md-content scrollen.

Ich gab eine Höhe von 500px zu md-content, so dass Sie den Effekt sehen können.

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

    <!-- Report content --> 

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

Hier ist die Arbeit codepen.

+0

Danke! Das ist definitiv eine Lösung, aber ich möchte die Höhe meines 'md-Inhalts' nicht einschränken. Gibt es eine Möglichkeit, sie dazu zu bringen, in meinem Szenario zu bleiben? Oder ist das nicht nur, wie klebrig 'md-subheader' verwendet werden sollte? – lebolo

+3

Basierend auf einer anderen [Frage, die ich hatte] (http://stackoverflow.com/a/36193493/1370556), nur Hinzufügen von "Layout =" Spalte "Layout-fill" zu den oberen div arbeitet. – lebolo