Javascript 位置：sticky不适用于top属性？

位置：sticky with bottom:10px on div with class侧边栏按预期工作，但属性top:10px未按预期工作

使用position:sticky With bottom:10px on div With class侧边栏，当我们向下滚动div时，粘到view port，底边在10px以上，指向view port

与position:sticky with top:10px on div with class侧边栏类似，当我们向上滚动时，div应该保持在顶部，div 10px的上边缘位于视口下方

但它不是这样工作的，问题是什么

代码：

.container{
/*宽度：1654px*/
宽度：100%；
背景色：#f0；
保证金：0自动；
}
.侧边栏{
位置：粘性；
底部：10px；
宽度：400px；
保证金：5px；
背景色：青色；
高度：1000px；
显示：内联块；
}
.主页{
宽度：1130px；
保证金：5px；
左边距：0px；
背景颜色：钢蓝色；
高度：6000px；
显示：内联块；
}
.页脚{
高度：500px；
宽度：1654；
保证金：0自动；
边缘顶部：10px；
背景颜色：紫色
}
.test1{
背景色：红色；
位置：相对位置；
左：0；
右：0；
排名：0；
高度：200px；
}
.test2{
背景色：红色；
位置：相对位置；
左：0；
右：0；
底部：0；
高度：200px；
}

测试1
测试2
主页
页脚

在我的例子中，粘滞元素（侧边栏）的父元素的高度小于内容=>粘滞元素的高度不会超过侧边栏的高度

解决方案：我使边栏的高度等于内容的高度（在内容和边栏的包装上使用displayflex）

HTML:

---

如果它足够远，达到10px的极限，就可以保持在原位。现在0位置的示例：底部粘滞：0px；不起作用，这里的目标是：底部为粘性的：0px和顶部为粘性的：0px都应该起作用。你应该注意这个位置：sticky仍然是实验性的，一些副作用可能会出现…好吧，我正在尝试使边栏像Flipkart的边栏（过滤器和货币范围存在的地方），看起来它的位置是sticky？我不知道它是什么，他们在布局中使用内联块吗？谢谢你的回答，但也请包括你的代码。使用css示例，您的答案将对其他人更有帮助。我编辑了我的答案。请让我知道这是否是您正在寻找的解决方案。

<div clas="container">
    <div class="content">This initially has a bigger height than sidebar.</div>
    <div class="sidebar">
        <div class="sticky"></div>
    </div>
</div>

.container { dislay: flex; } // By using this I make the sidebar the same height as the content
.sticky { position: sticky; top: 0; }