如何使用CSS或Bootstrap实现从网页指定位置开始固定的导航栏

你需要的导航栏仅在指定网页范围内固定的效果，完全可以通过原生CSS实现，无需额外复杂脚本。你现有代码已经用到了核心的sticky定位，仅需修改2处错误即可生效：

• 修正.barra的z-index配置：当前设置的z-index: -1会导致导航栏被后续的Profile、Experience等内容块覆盖，调整为z-index: 999即可保证导航栏始终显示在层级最上方
• 可自定义粘住位置：根据需求调整top属性的值，比如设置为top: 20px即可让导航栏粘住时距离视口顶部保留20px的间距，无需完全贴顶

核心修改后的CSS代码 #

.barra {
    border-radius: 30%;
    padding: 0;
    opacity: 80%;
    position: sticky;
    top: 0; /* 可按需调整数值 */
    z-index: 999; /* 仅修改这一行即可解决核心问题 */
}

额外优化说明 #

1. <img>是HTML单标签，无需写</img>闭合，你现有代码中把h1、hr、p放在img标签内部的写法不符合规范，直接删除多余的</img>即可
2. 你使用的Bootstrap 5已经内置了.sticky-top工具类，如果你不想手动编写sticky相关样式，直接给nav标签添加这个类即可，效果和手动写position: sticky; top: 0;完全一致

实现原理说明 #

sticky定位的元素仅会在它的直接父容器的可视范围内生效，你当前的导航栏父容器刚好位于首屏jumbotron之后，且包含了所有内容板块。当首屏还在视口内时，父容器顶部未到达视口顶部，导航栏会跟着页面正常滚动；等滚动到父容器顶部贴住视口时，导航栏就会固定，直到父容器完全滚出视口才会跟着消失，刚好匹配你需要的效果。

内容的提问来源于stack exchange，提问作者Ariel Curu