css - 应用粘性位置

Question

我正在开发我在元素中期接管的 Shopify 商店。我添加了一个自定义公告栏。但是，在尝试 CSS 位置选项后滚动时，我无法让它保持在顶部。每次我尝试导航栏时，它要么在其上滚动，要么只是将公告栏推到视线之外，让导航栏保持粘滞状态。

这是一个实时预览链接。自定义公告栏为橙色:https://crazy-bull-america.myshopify.com/?_ab=0&_fd=0&_sc=1

Answer 1

这很容易。您必须提供公告栏的高度，并使导航栏粘在该高度。

作为你的网站，公告栏的高度是41像素...你也可以加一个固定的高度!因此，将公告栏粘在 0 像素处，将导航栏粘在 41 像素处。

这是公告栏的 CSS:

.section-announcement-bar {
   position: sticky;
   top: 0;
   z-index: 20;
}

这是导航栏

.sticky-header .section-header {
    position: sticky;
    top: 41px;
    width: 100%;
    z-index: 20;
}