如何在覈心標題面板上的核心工具欄的接縫上放置一個造紙廠

Question

是否有一種簡單的方法將紙廠放置在覈心工具欄的接縫上下面的內容在覈心頁眉面板中？核心頭部面板使用瀑布高，因此可以改變高度。

想法是讓它看起來像粉紅色的按鈕，以及使粉紅色的按鈕始終跟蹤邊緣。

Answer 1

如果工具欄很高，但由於用戶向下滾動列表而收縮，我認爲晶圓廠必須隨之移動。我能找到的最佳方式包括硬編碼工具欄的2個可能高度，以及工具欄使用的轉換。

#core_toolbar { 
    color: rgb(255, 255, 255); 
    font-size: 1.2rem; 
    font-weight: 400; 
    background-color: rgb(33, 150, 243); 

    #create_button { 
    position: absolute; 
    top: calc(64px - 28px); 
    right: 24px; 
    z-index: 1; 
    transition: top 0.18s ease-in; 
    } 
} 
#core_toolbar.tall { 
    #create_button { 
    position: absolute; 
    top: calc(192px - 28px); 
    right: 24px; 
    z-index: 1; 
    transition: top 0.18s ease-in; 
    } 
} 

什麼特別之處HTML：

<core-header-panel mode="waterfall-tall" id="core_header_panel"> 
    <core-toolbar id="core_toolbar" class="animate tall"> 
    <div></div> 
    <paper-fab id="create_button" icon="add"></paper-fab> 
    </core-toolbar> 
    <section></section> 
</core-header-panel>