如何用JavaScript在滚动过Intro后移除Header的Sticky定位？

1. 修复CSS语法错误 #

你的.sticky类缺少闭合大括号，会导致样式块完全失效，先补上：

#head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px;
    background-color: #CDFFFC;
    min-height: 150px;
    padding: 15px;
    box-sizing: border-box; /* 新增，避免padding撑宽元素 */
}
.sticky {
    position: sticky;
    top: 0;
    width: calc(100% - 20px); /* 替换100%，适配原有的margin:10px，避免溢出页面 */
    z-index: 1000;
    background-color: #CDFFFC;
} /* 补上闭合大括号 */

2. 优化JavaScript滚动判断逻辑 #

原代码用offsetTop + offsetHeight计算位置易受父元素定位影响，改用getBoundingClientRect()获取视口相对位置更准确，同时页面加载时先执行一次判断，确保初始状态正确：

// 封装成独立函数，方便复用和初始化
function updateHeaderSticky() {
    const header = document.getElementById('head');
    const introSection = document.getElementById('intro');
    
    // 获取intro区块相对于视口的底部位置
    const introBottomInViewport = introSection.getBoundingClientRect().bottom;
    
    // 当intro区块底部完全滚出视口时，移除sticky类
    if (introBottomInViewport <= 0) {
        header.classList.remove('sticky');
    } else {
        header.classList.add('sticky');
    }
}

// 页面加载时先执行一次，设置初始状态
window.addEventListener('load', updateHeaderSticky);
// 滚动时触发状态更新
window.addEventListener('scroll', updateHeaderSticky);

3. 额外注意事项 #

• 确保intro区块下方有足够的内容让页面可以滚动，否则无法测试滚动效果。
• 如果使用Bootstrap的navbar组件，注意不要和框架自带的sticky样式冲突。

内容的提问来源于stack exchange，提问作者Vincent Njeru