纸卷标题面板，工具栏到达顶部后保留

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

本文关键字：顶部 保留 工具栏 标题      更新时间：2023-09-26

我试图使用聚合物的paper-scroll-header-panel作为我的应用程序的基础，需要有一个子菜单(paper-toolbar)，开始一个方式下的页面"棒"下面的主标题一旦它到达那里。我现在的布局是这样的，但正如预期的那样，第二个工具栏在标题下滚动，一旦它到达那里:

<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滚动功能?我想模仿这种效果，但使用$('#id').scroll(function(e){//stuff}));似乎不起作用，这似乎是因为这是针对主窗口滚动，这种聚合物元素在窗口内创建了自己的滚动区域。在github上查看元素的代码，我可以看到它有一个scroller()函数和一个sTop变量，等于我认为我需要的this.scroller.scrollTop，但我不确定如何在聚合物中访问这些。

我可以用类似的方法解决这两个问题:

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 }
});

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

相关文章：