Question

我正在开发聚合物SPA。我的主要布局使用app-layout集来创建标题栏和下面的可滚动页面 - 因此

<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>

我的一个页面是一个大型的月度日历，用于查看预约和预约约会，当用于预订时，将会有大量关于所选日期预订的重要信息，这么多因此，在普通屏幕上，日历的最后几周消失在屏幕底部，我的页面可以滚动。

此<page-element>的结构如此

<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>

我想在此页面上实现的目标（记住主应用工具栏在屏幕顶部保持静态）是

分类=＆＃34;日＆＃34;在屏幕顶部保持静态（在主app工具栏下）
当用户向下滚动页面直到它完全消失时，日历标题选择会折叠 - 但是如果使用仅向上滚动一小部分，那么只会在＃34; daysofweek＆＃34; line显示自己（即<app-header>）
页面的其余部分，日历本身向上和向下滚动，以便当用户完全向下滚动时，月份的最后一周位于页面的正底部
当class =＆＃34; day＆＃34;不存在（即有人只是查看日历，然后这只是向上折叠到零高度，但页面的其余部分如上所述，但具有较大的视口。

我尝试使用嵌套的<app-header-layout>，但这似乎只是让我使用应用工具栏，日历的底部填充了屏幕的其余部分而不能滚动。所以我正在寻找有关如何实现这一目标的建议，无论是使用聚合物元素，还是自己使用css。

更新

尝试使用paper-scroll-header-panel，但一切都变得不可见了。没有理想的原因，因为在chrome dev工具中放置在页面上正确位置的各种元素，但没有显示，我无法找到原因

我还尝试将日历容器元素设置为overflow-y: scroll，但我最终得到了两个垂直滚动条，只有外部滚动条工作（即应用程序级别一个）。这个实验让我想知道是否应该尝试使用scrollTarget

上的app-header

Answer 1

我最终找到了如何做到这一点。答案几乎是完美的，当靠近工具栏时滚动条有一点点困难，但除此之外它有效。秘诀是知道主app工具栏的高度（通常是64px）和上面显示的内容为<section class="day">

然后使用一些特殊设置将两个底部部分包裹在<paper-scroll-header-panel>元素中。结果如下

<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>

condensed-header-height属性中的40px是#daysofweek元素的高度

关键在于设定paper-scroll-header-panel的高度。它应该是height: calc(100vh - xxxpx)，其中xxx是应用程序的高度主工具栏加上节类“day”的高度的总和。

如何实现嵌套标题栏效果？

1 个答案: