Css 固定导航内滚动div

我想要一个导航条，它固定在一个可滚动的div中，而不是整个窗口的顶部。在下面的示例中，我希望导航栏显示在红色区域，并在滚动时保持固定

#containerDiv{
填充顶部：60px；
}
#卷轴{
溢出y：滚动；
高度：100px；
}
#scrollableContentDiv{
背景色：红色；
}

外部可滚动

外部可滚动

外部可滚动

内部可滚动

内部可滚动

内部可滚动

内部可滚动

内部可滚动

内部可滚动

外部可滚动

外部可滚动

外部可滚动

固定在红色框内。使用。粘性顶部（位置：粘性；）

问题是“sticky”是一个实验性的API，目前还不应该在生产代码中使用。但它在我测试的Chrome上运行良好。另外，带有“sticky”的元素不应该是唯一的子元素。它必须有兄弟（或姐妹）

请注意，根据规范，sticky不会在溢出的元素内部工作：hidden或auto

#containerDiv{
填充顶部：60px；
}
#卷轴{
溢出y：滚动；
高度：100px；
}
#scrollableContentDiv{
背景色：红色；
}

外部可滚动

外部可滚动

外部可滚动

内部可滚动

内部可滚动

内部可滚动

内部可滚动

内部可滚动

内部可滚动

外部可滚动

外部可滚动

外部可滚动