Question

由于app-header-layout堆叠上下文问题，我必须完全删除该组件，并使用它自己的<app-header condenses reveals>。

我的问题是标题缩写，粘性和显示行为不能按预期工作并做一些奇怪的事情。

<!-- <app-header-layout has-scrolling-region> -->
<app-header condenses reveals effects="waterfall">
    <div id="pageToolbar">
        <!-- Various global stuff, logo, search, social links -->
    </div>

    <div id="pageHeader" sticky>
        <!--
            Dynamic content that changes based on the page,
            normally contain tabs, and should therefor be sticky
        -->
    </div>
</app-header>

<div id="content">
    <!-- Actual content -->
</div>
<!-- </app-header-layout> -->

问题

标题滚出视图太快，在它和内容之间留下明显的间隙。
滚动回来并没有透露，直到你到达顶部;在标题完全滑入到位之前，您会再次看到间隙。
粘性元素不会粘住。

所有这些都在app-header-layout内按预期工作。

应用布局版

＆＃34; app-layout＆＃34;：＆＃34; PolymerElements / app-layout＃^ 0.10.6＆＃34;，

Answer 1

肯定是因为<app-header-layout>元素定义了一些使<app-toolbar>工作的样式。

复制example linked中定义的样式，它应该会更好。

别忘了添加：

is="custom-style"中的<style>属性，
fixed中的<app-header>属性，
将{ padding-top: [your-header-size] } CSS规则发送到#content div。

<style is="custom-style">
body {
  margin: 0;
}
app-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100px;
  color: white;
  background: dodgerblue;
}
div#content{
  padding-top: 100px;
}
</style>

没有app-header-layout

1 个答案: