点击tabs标签后无法固定在导航栏下方且内容溢出如何解决？

问题根因 #

• 你同时给.tabs和内部的.tab-outer设置了sticky定位，规则冲突导致定位逻辑异常
• 固定态的tabs没有设置足够高的z-index，层级低于后续内容自然会被覆盖
• 写死的scroll >= 500判断不够灵活，页面结构调整后阈值就会失效
• 原生锚点跳转没有考虑固定导航栏、固定tabs的占位高度，导致目标内容被遮挡

调整方案 #

1. 修正CSS代码

// 先移除.tab-outer上的sticky相关配置，统一由父级.tabs管理
.tabs {
    margin-bottom: 50px;
    transition: all 0.2s;

    .tab-outer {
        border-bottom: 4px solid #f5f5f5;
        padding: 20px 0 0 0;
    }

    .tab-list {
        a {
            color: #4a4947;
        }
     
        ul {
           padding: 0 30px;
           display: flex;
           justify-content: space-between;
           list-style-type: none;
        }
    }
}

// 固定态的样式，top值对应导航栏高度，z-index设高避免被覆盖
.tabs-position {
    position: sticky;
    top: 70px; // 对应导航栏高度，刚好在导航栏下方展示
    background-color: #fff; // 替换为和页面背景一致的颜色
    z-index: 99; // 层级高于其他普通内容
}

// 给锚点目标元素加滚动偏移，避免跳转后被导航栏+tabs遮挡
#room, #info {
    scroll-margin-top: 140px; // 值=导航栏高度 + tabs高度，可根据实际效果调整
}

2. 修正JS代码

// 页面加载完成后自动获取tabs的初始顶部偏移量，无需写死阈值
const tabOffsetTop = $(".tabs").offset().top;

$(window).scroll(function() {
    const scroll = $(window).scrollTop();
    // 滚动超过tabs初始位置时启用固定
    if (scroll >= tabOffsetTop) {
        $(".tabs").addClass("tabs-position");
    } else {
        $(".tabs").removeClass("tabs-position");
    }
});

// 可选：如果需要更平滑精准的锚点跳转，可拦截点击事件手动控制滚动
$(".tab-list a").click(function(e) {
    e.preventDefault();
    const targetId = $(this).attr("href");
    const targetOffset = $(targetId).offset().top - 140; // 偏移值和上方scroll-margin-top保持一致
    $("html, body").animate({
        scrollTop: targetOffset
    }, 300);
});

补充验证点 #

如果sticky效果还是异常，检查tabs的所有父级元素，不能有设置overflow: hidden/auto/scroll的规则，否则会导致sticky失效。

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