顶部菜单设置position:fixed固定后滚动时下方div图片被遮挡如何修复

问题原因 #

当你给.first设置position: fixed的时候，该元素会脱离正常文档流，原本它在页面中占据的高度空间会直接消失，后面的.second元素就会自动向上偏移，刚好被固定在顶部的.first盖住，才会出现图片上半部分消失的情况。

修复方案 #

方案1：修改JS动态补全高度（兼容性最好，适配所有浏览器） #

提前获取导航栏的高度，当触发吸顶逻辑时给下方元素添加对应高度的上内边距，抵消导航脱离文档流带来的高度空缺，代码修改如下：

var fixmeTop = $('.first').offset().top;
// 提前获取导航栏的实际高度
var firstHeight = $('.first').outerHeight();
$(window).scroll(function() {
    var currentScroll = $(window).scrollTop();
    if (currentScroll >= fixmeTop) {
        $('.first').css({
            position: 'fixed',
            top: '0',
            // 可选：提升层级避免被其他元素覆盖
            'z-index': 999
        });
        // 给下方元素添加上内边距，防止内容被遮挡
        $('.second').css('padding-top', firstHeight + 'px');
    } else {
        $('.first').css({
            position: 'static'
        });
        // 恢复默认定位时移除多余的内边距
        $('.second').css('padding-top', 0);
    }
});

方案2：CSS粘性定位方案（性能更好，现代浏览器通用） #

如果你不需要兼容非常老的浏览器，可以直接删掉原有JS逻辑，仅给.first加一行CSS即可实现同样的吸顶效果，不会出现内容遮挡问题：

.first {
  position: sticky;
  top: 0;
  z-index: 999;
}

sticky定位的元素不会脱离正常文档流，原本占据的高度会一直保留，滚动到阈值位置时自动吸顶，无需额外处理下方内容的偏移。

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