0

Due to stacking context issues with app-header-layout I had to remove that component completely and use <app-header condenses reveals> by it's own.

My issue is that the header condense, sticky and reveal behaviors are not working as expected and doing weird things.

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

Issues

  • The header scrolls out of view way too fast, leaving a visible gap between it and the content.
  • Scrolling back up doesn't reveal, until you reach the top; You see the gap again, before the header slides fully into place.
  • The sticky element doesn't stick.

All of this worked as expected inside app-header-layout.

App Layout version

"app-layout": "PolymerElements/app-layout#^0.10.6",

Andre
  • 1,292
  • 1
  • 17
  • 34

1 Answers1

2

It's certainly because the <app-header-layout> element was defining some styles that makes the <app-toolbar> work.

Copy the styles defined in the example linked and it should work better.

Don't forget to add :

  • the is="custom-style" attribute in <style>,
  • the fixed attribute in <app-header>,
  • the { padding-top: [your-header-size] } CSS rule to your #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>
Community
  • 1
  • 1
Supersharp
  • 29,002
  • 9
  • 92
  • 134