Css 为什么col使我的粘性导航栏不工作？

我正试图在网站顶部有一个粘性的促销条。任何标志就在它下面。在徽标下有一个粘性导航条。促销和导航栏应为col-8

所有这些都可以使用粘滞功能，但当我在导航和升级栏中添加“col-8”时，粘滞功能不起作用

我用的是bootstrap4

（有趣的是，在CodeSandbox上它可以工作，但在chrome/safari上却不行：）

代码如下：

html{
滚动行为：平滑；
}
身体，
* {
字体系列：“Futura”、“Montserrat”、“Trebuchet MS”、“Lucida Sans Unicode”、“Lucida Grande”、“Lucida Sans”、Arial、Sans serif；
字体：16px/18px无衬线；
背景色：黑色！重要；
最大宽度：100%；
最大高度：100%；
}
img{
最大宽度：100%；
最大高度：自动；
}
/*-----标志------*/
.标志{
位置：相对位置；
最高：50%；
左：50%；
转换：翻译（-50%）；
高度：35em；
最大宽度：100%；
保证金：3em0 3em0；
}
/*-----促销栏------*/
.促销酒吧{
文本对齐：居中；
字体大小：粗体；
背景：线性梯度（至底部，#e8b923 0%，#e8b923 100%）；
颜色：#2e；
垂直对齐：中间对齐；
字体大小：1.3em；
填充：0.5%；
}
/*-----导航栏------*/
#导航栏{
背景色：#333；
文本对齐：居中；
边框顶部：1件纯色白烟；
边界半径：7px；
显示器：flex；
证明内容：周围的空间；
利润率：1亿欧元1亿欧元；
宽度：100%；
}
#导航栏a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：.7em；
文字装饰：无；
}
.粘的{
位置：粘性；
排名：0；
填充：0！重要；
}

收益率-10%来自caisse avec代码：“SITEWEB10”
|

@DDeveloper的答案帮助我找到解决方案

在第一个

中放入

粘性
函数，在他的孩子中放入
col-8

像这样：

<div class="sticky">
  <div class="col-8"></div>
</div>


尝试在
col-8
@d开发者下添加
sticky
，谢谢这有助于我找到解决方案！它先是粘性的，然后是粘性的。如果它不起作用，那么先改变位置，然后是粘性的。这个解决方案每次对我都有效