How can I achieve a nested header bar effect?

Question

I am developing an SPA in Polymer. My main layout uses the app-layout set to create a header bar and scrollable page underneath - thus

<app-header-layout>
  <app-header>
    <app-toolbar>
      toolbar content ...
    </app-toolbar>
  </app-header>
  <iron-pages ...>
    <page1-element></page1-element>
    ...
    <pagen-element></pagen-element>
  </iron-pages>
<app-header-layout>

One of my pages is a large monthly calendar used for viewing a summary of and booking appointments, which when used for booking is going to have a large chunk of important information sitting above it about the bookings for the selected day, so much so that on normal screens the last couple of weeks of the calendar disappears off the bottom of the screen and my page becomes scrollable.

The whose structure of this <page-element> is like so

<section class="day">
  Information which takes up about 1/3 of the screen
</section>
<section class="calendar header">
  <paper-tabs>Tabs for each office</paper-tabs>
  <div>Area to allow selection of month and year, with next and previous buttons</div>
  <ul id="daysofweek">...</ul>
</section>
<section class="calendar">
  Calendar itself in weekly rows
</section>

What I would like to achieve on this page (remembering the main app toolbar remains static at the top of the screen) is

• Section with class="day" remains static at the top of the screen (under the main app toolbar)
• The calendar header selection collapses as the user scrolls down the page until it is gone completely - but if the use scrolls back up just a little bit only the "daysofweek" line reveals itself (ie the reveal pattern supported by the scroll-effects in <app-header>)
• The remaining part of the page, the calendar itself scrolls up and down such that the last week of the month is at the exact bottom of the page when the user has fully scrolled down
• when the section with class="day" is not present (ie someone is just viewing the calendar, then this just collapses upwards to zero height, but the remainder of the page acts as described above, but with the larger viewport.

I tried using a nested <app-header-layout> but that seemed to just leave me with the app toolbar, and the bottom of the calendar filling the rest of the screen and not scrollable. So I am looking for advice on how to achieve this, either using the polymer-elements, or doing it myself with css.

UPDATE

tried using paper-scroll-header-panel, but everything became invisible. No ideal why as in chrome dev tools the various elements where placed at the correct point on the page, but didn't show up and I couldn't find out why

I also tried setting the calendar container element to overflow-y: scroll, but I ended up with two vertical scroll bars and only the outer one worked (ie the app level one). This experiment is making me wonder if I should try playing with scrollTarget on app-header

Answer 1

I eventually found how to do this. The answer is almost perfect, there is a slight difficulty with the scroll bar when close to the toolbar, but other than that it works. The secret is knowing the height of the main app toolbar (generally 64px) and of the content shown above as <section class="day">

Then wrap the two bottom sections in a <paper-scroll-header-panel> element with some special settings. The result is the following

<section class="day">
  Information which takes up about 1/3 of the screen
</section>
<paper-scroll-header-panel condenses condensed-header-height="40px" scroll-away-top-bar class="expanded">
  <section class="calendar header paper-header">
    <paper-tabs>Tabs for each office</paper-tabs>
    <div>Area to allow selection of month and year, with next and previous buttons</div>
    <ul id="daysofweek">...</ul>
  </section>
  <section class="calendar">
    Calendar itself in weekly rows
  </section>
</paper-scroll-header-panel>

The 40px in the condensed-header-height attribute is the height of the #daysofweek element

The crux of this is setting the height of the paper-scroll-header-panel. It should be a height: calc(100vh - xxxpx) where xxx is the sum of the height main toolbar of the application plus the height of the section class "day".