Question

我正在开发的应用程序包含几个主要部分。为此，我有一个用于整个应用程序的全局工具栏和一个特定于应用程序特定部分的工具栏。

这是一个要点，它演示了单个应用程序的视图可能是什么样的：

https://gist.github.com/mattjonesorg/33b2bbcb0b0c81feb5ca

（将要点粘贴到聚合物设计师处以便快速查看）

我将主应用程序的工具栏作为核心 - scroll-header-panel。子菜单在内容中。问题是子菜单在core-scroll-header面板下滚动，我可以很容易地看到它的设计，但是我希望有人有一个提示允许我保留主要的core-scroll-header-panel并且工具栏锁定在屏幕顶部。我已尝试在该部分中嵌套核心标题面板，但这也做了同样的事情。

我的实际应用是Dart，但我对Javascript答案感到满意。

提前致谢，

马特

Answer 1

您将子菜单核心工具栏嵌套在滚动区域（<section id="section2" content>）中。如果你想留下它，把它放在滚动区域之前：

<core-toolbar id="core_toolbar" class="tall">
   ...
   <div id="div1" class="bottom indent">Title</div>
</core-toolbar>
<core-toolbar id="core_toolbar1">
   <core-icon-button icon="menu" id="core_icon_button3"></core-icon-button>
   <div id="div2" flex>Submenu Toolbar</div>
</core-toolbar>
<section id="section2" content>
   <p id="p">Hello, World</p>
   ...

如果你想让两者都保持滚动：

<core-scroll-header-panel fixed>

如果您只想要子菜单：

<core-scroll-header-panel>

如果你想让标题缩小并让它们都坚持下去：

<core-scroll-header-panel condenses keepCondensedHeader>

Polymer的core-scroll-header-panel with submenu toolbar

1 个答案: