アプリのヘッダーレイアウトなしでポリマーのapp-headerが意図したとおりに動作しない

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です。

アプリのレイアウトバージョン

"アプリレイアウト"： "PolymerElements /アプリレイアウト＃^ 0.10.6"、

Answer 1

<app-header-layout>要素が<app-toolbar>を行い、いくつかのスタイルを定義したので、それは確かです作業。

example linkedで定義されているスタイルをコピーしてください。

は、追加することを忘れないでください：

• <style>でis="custom-style"属性、
• <app-header>でfixed属性、
• { 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>