응용 프로그램 헤더 레이아웃없이 폴리머 앱 헤더가 의도 한대로 작동하지 않습니다.

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>