Paper-scroll-header-panel 工具栏在到达顶部后仍然存在

Question

我正在尝试使用 Polymer 的 paper-scroll-header-panel 作为我的应用程序的基础，并且需要有一个子菜单 (paper-toolbar)，该子菜单从主页面下方 "stick" 开始header 一旦它到达那里。我目前的布局是这样的，但正如预期的那样，第二个工具栏一旦到达那里就会在 header 下向上滚动：

<paper-scroll-header-panel condenses keep-condensed-header>
    <paper-toolbar class="tall layout horizontal" id="title-toolbar">
      <div class="bottom bottom-container horizontal layout">
        <div class="bottom-title paper-font-subhead">Title</div>
      </div>

    </paper-toolbar>
    <div id="content" class="content-dark">
      <div class="horizontal center-justified layout">
        <!-- some body content here -->
      </div>

      <paper-toolbar justify="center"> <!-- this is the toolbar that needs to stick once it scroll up under the header-->
          <paper-tabs selected="{{selected}}" class="fit" scrollable>
              <paper-tab>1</paper-tab>
              <paper-tab>2</paper-tab>
              <paper-tab>3</paper-tab>
              <paper-tab>4</paper-tab>
          </paper-tabs>
      </paper-toolbar>
        <iron-pages selected="{{selected}}">
            <div><!-- page content --></div>
            <div><!-- page content --></div>
            <div><!-- page content --></div>
            <div><!-- page content --></div>
        </iron-pages>
    </div>
  </paper-scroll-header-panel>

额外问题（可选，但需要！）- 如何通过 javascript 访问 paper-scroll-header-panel 滚动功能？我想模仿 this effect but using $('#id').scroll(function(e){//stuff})); doesn't seem to work and it appears to be because that is targeting the main window scroll and this polymer element creates its own scroll area within the window. Looking at the element's code on github 我可以看到它有一个 scroller() 函数和一个等于 this.scroller.scrollTop 的 sTop 变量，我想我会需要它，但我不太确定如何在 Polymer 中访问这些。

Answer 1

我能够以类似的方式解决这两个问题：

addEventListener('content-scroll', function() {
var scroller = document.querySelector('paper-scroll-header-panel').scroller.scrollTop;
if (scroller >= 150) //magic numbers ugh
{ //add classes for fixed } else { //remove classes for fixed }
});

我不确定这是否是最好的方法，但它似乎有效。

Paper-scroll-header-panel 工具栏在到达顶部后仍然存在

Paper-scroll-header-panel with toolbars that remain once they reach the top

javascript

polymer