Question

I am trying to use Polymer's paper-scroll-header-panel as the base for my app and need to have a submenu (paper-toolbar) that starts a ways down the page "stick" underneath the main header once it gets there. I have it laid out like this currently but as expected the second toolbar scrolls up under the header once it gets there:

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

Extra question (optional, but desired!) - How can I access the paper-scroll-header-panel scroll functionality via javascript? I want to mimic 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 I can see it has a scroller() function and an sTop variable that is equal to this.scroller.scrollTop which I think I will need but I am not really sure how to access these in 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 with toolbars that remain once they reach the top

1 个答案: