css - 应用粘性位置

Question

我正在开发一个 Shopify 商店，我在元素进行过程中接管了该商店。我添加了一个自定义公告栏。但是，在尝试 CSS 位置选项后滚动时，我无法让它粘在顶部。每次我尝试导航栏时，它要么滚动到导航栏上，要么只是将公告栏推出 View 并使导航栏保持粘性。

这是实时预览链接。自定义公告栏为橙色: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;
}