如何在核心标题面板上的核心工具栏的接缝上放置一个造纸厂

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>