Javascript 聚合物将岩心工具栏从“高”更改为“正常”

我正在重新设计我的网站。我在实现与的组合时遇到了一些问题

我的问题是：我的左边有一个菜单，在我的网站上有一个菜单。在右侧，我有

核心滚动标题面板

。现在，在一些页面（在

核心抽屉面板中选择）上，我想显示一个高标题，在其他页面上显示一个小标题。因此，我需要一种方法来切换
核心工具栏
的
高度
-属性

为此，我使用Polymer来更改
核心工具栏的类。不幸的是，这还不够，因为侧边栏中的内容在更改类后处于关闭位置。澄清一下：如果您将站点加载为一个高的
核心工具栏
，则右侧显示的内容都会稍微向底部偏移。当将类更改为非
高度
时，此偏移保持不变。反之亦然，您可以在此处看到一个工作示例：。在示例代码中，您可以将
if（this.page==“tall”）{
更改为
small
，而不是
tall
，以查看反之的效果。代码如下：

<polymer-element name="my-app">
  <template>
    <style>
      core-toolbar#navheader{
        background-color: #99182c;
        color: white;
      }
      core-toolbar#mainheader{
        color: white;
        fill: white;
        background-color: transparent;
      }
      core-drawer-panel:not([narrow]) #navicon{
        display: none;
      }
      core-scroll-header-panel::shadow #headerBg {
        background-image: url(http://lorempixel.com/output/cats-q-c-640-480-3.jpg);
      }
      core-scroll-header-panel::shadow #condensedHeaderBg {
        background-color: #99182c;
      }
      core-header-panel#drawer{
        background-color: white;
      }
      paper-item.core-selected:not(.noColor){
        color: #99182c;
        fill: #99182c;
      }
      .big-container{
        display:block;
        position: relative;
        background-color: white;
        padding: 20px;
        margin: 10px;
      }
    </style>

    <core-drawer-panel id="drawerPanel">
      <core-header-panel drawer id="drawer" mode="seamed">
        <core-toolbar id="navheader">
          <span>Main Title</span>
        </core-toolbar>

        <core-menu selected="{{page}}" valueattr="id" selectedItem="{{pageItem}}">
          <paper-item icon="home" label="Small" id="small"></paper-item>
          <paper-item icon="today" label="Tall" id="tall"></paper-item>
        </core-menu>
      </core-header-panel>

      <core-scroll-header-panel main condenses="true" id="headerPanel" keepCondensedHeader>

        <core-toolbar class="{{mainheaderClass}}" id="mainheader">
          <paper-icon-button id="navicon" icon="menu" on-tap="{{nav}}"></paper-icon-button>
          <paper-icon-button id="back" icon="arrow-back"></paper-icon-button>
          <div flex></div>
          <paper-menu-button icon="more-vert" halign="right">
            Nothing yet!
          </paper-menu-button>
          <div class="bottom indent title">{{pageItem.label}}</div>
        </core-toolbar>

        <div class="content">
          <core-animated-pages selected="{{page}}" transitions="cross-fade-all" class="main" valueattr="id"> <!-- class main needed? -->
            <section id="small">
              <div class="big-container">
                The header should be a small one that stays there.
                <lorem-ipsum paragraphs="100"></lorem-ipsum>
              </div>
            </section>
            <section id="tall">
              <div class="big-container">
                The header should be a tall one that scrolls down into a small one and stays there.
                <lorem-ipsum paragraphs="100"></lorem-ipsum>
              </div>
            </section>
          </core-animated-pages>
        </div>

        </core-header-panel>

      </core-scroll-drawer-panel>
  </template>
  <script>
    Polymer('my-app', {
      ready: function(){
        this.page = 'tall';
      },
      pageChanged: function(){
        if(this.page == "tall"){
          this.mainheaderClass = "tall"
        }else{
          this.mainheaderClass = "";    
        }
      },
      nav: function(){
        this.$.drawerPanel.togglePanel();
      }
    });
  </script>
</polymer-element>


核心工具栏#导航标题{
背景色：#99182c；
颜色：白色；
}
核心工具栏#主标题{
颜色：白色；
填充物：白色；
背景色：透明；
}
堆芯抽屉面板：非（[窄]#navicon{
显示：无；
}
核心滚动标题面板：：阴影#标题{
背景图片：url(http://lorempixel.com/output/cats-q-c-640-480-3.jpg);
}
核心滚动标题面板：：阴影#压缩标题{
背景色：#99182c；
}
堆芯顶部面板#抽屉{
背景色：白色；
}
纸张项目。所选核心：非（.noColor）{
颜色：#99182c；
填充：#99182c；
}
.大货柜{
显示：块；
位置：相对位置；
背景色：白色；
填充：20px；
利润率：10px；
}
主标题
还没有！
{{pageItem.label}
收割台应该是一个保持在那里的小收割台。
标题应该是一个高的，向下滚动成一个小标题，并保持在那里。
聚合物（“my-app”{
就绪：函数（）{
this.page='toll'；
},
pageChanged:函数（）{
如果（this.page==“高”）{
this.mainheaderClass=“高”
}否则{
this.mainheaderClass=“”；
}
},
导航：函数（）{
这是$.DroperPanel.togglePanel（）；
}
});

大概这种切换状态的方式不是一种好方法。最重要的是，当它处于小状态时，颜色没有填充

我在这里做错了什么，应该怎么做

更新：我在上提交了一个错误。一位合作者回答说，
核心滚动标题面板仍然存在问题，一些样式没有重置，他们正在修复，希望在下一个版本之前修复

合作者还补充说，可以调用
.measureHeaderHeight（）
来重新评估内容的高度，如下所述。
您的代码有几个问题：

1.）您的HTML结构中似乎有一些错误：

您使用了
核心滚动标题面板
，但使用了错误的结束标记（
核心标题面板
）

2.）是否确实要使用
核心滚动标题面板
，而不是
核心标题面板
。
如果您使用
核心标题面板而不是
核心滚动标题面板
，这就是它的外观


3.）如果使用
核心滚动收割台面板
，可能需要重新计算收割台高度。
这就是代码文档所说的：

/**
   * The height of the header when it is at its full size.
   *
   * By default, the height will be measured when it is ready.  If the height
   * changes later the user needs to either set this value to reflect the
   * new height or invoke `measureHeaderHeight()`.
   *
   * @attribute headerHeight
   * @type number
 */
    headerHeight: 0,

您需要将此消息发送到
pageChanged
回调：

this.async(function() {
    this.$.headerPanel.measureHeaderHeight();
});

请看这里：

您必须切换
核心滚动标题面板的
固定属性

请参见此jsbin：

1.我的坏，在我的初始设计中使用了
核心标题面板
。2.我非常确定我想要
核心滚动标题面板
，因为我希望图像淡入颜色。3.看起来不错，但似乎有一些问题。如果在
高的
页面上滚动一半（图像是半彩色的）然后转到
small
页面，标题栏具有相同的不透明度。此外，当滚动到页面的一半并返回到
tall
时，标题从全高开始，但半透明，内容已向下滚动…我可以看到这些问题。我猜
核心滚动标题面板
不正确支持在高标题和小标题之间切换的用例。在切换模式之前，您可以尝试滚动到顶部。但是ConcurrentDBG和headerBg上的不透明度没有重置。请参阅此处：这可能是可能的。此解决方案更好，但仍然不太令人满意。另一种可能是放置
核心标题面板
和
核心-滚动标题面板
s在内容中。它可能会工作，但对于其他故障来说是一个非常大的解决办法。我不太确定我现在应该做什么…我认为这可能是核心滚动标题面板
中的一个错误。它应该正确处理标题大小的变化，而不需要滚动到顶部。你可以创建一个github在correspo中发布