给想要设置吸顶效果的部分添加如下的css样式

.fixed-top{
    // sticky 吸顶的意思
    position: sticky;
    // 通过 top 指定距离顶部的位置。
    top: 0;
    z-index: 9; // 提高层级
}

position:sticky;吸顶效果和position:fixed; 的区别
fixed是固定到页面中某一个位置就不再随着页面的滚动而变化了,
而sticky吸顶效果会先跟着页面的滚动而变化,当到达页面顶部就不再动了。

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐