Polymer's core-scroll-header-panel with submenu toolbar

问题

The application I am developing consists of several major sections. To this end, I have a global toolbar for the entire application and a toolbar that is specific to the particular section of the application.

Here is a gist that demonstrates what the view for an individual application might look like:

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

(Paste the gist into the polymer designer for a quick view)

I have the main application's toolbar as a core-scroll-header-panel. The submenu is in the content. The problem is that the submenu is scrolling under the core-scroll-header panel, which I can easily see as by design, but I'm hoping somebody has a tip for allowing me to keep both the main core-scroll-header-panel and the toolbar locked at the top of the screen. I've tried nesting a core-header-panel in the section, but that did the same thing.

My actual application is in Dart, but I'd be happy with a Javascript answer.

Thanks in advance,

Matt

回答1:

You have the submenu core-toolbar nested in the scroll region (the <section id="section2" content>). If you want it to stay, put it before that scroll region:

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

If you want the both to stay put on scrolling:

<core-scroll-header-panel fixed>

If you want just the submenu to stick:

<core-scroll-header-panel>

If you want the header to condense and have them both stick:

<core-scroll-header-panel condenses keepCondensedHeader>

来源：https://stackoverflow.com/questions/26026247/polymers-core-scroll-header-panel-with-submenu-toolbar

标签

polymer

dart-polymer