移动端粘性导航栏滚动到区块后定位偏移若干像素问题

你的问题本质是粘性导航栏的高度没有被纳入滚动偏移计算，浏览器原生锚点滚动会忽略固定/粘性元素的占位，导致目标区块被导航栏遮挡，看起来像是定位偏下。之前尝试的margin/padding无效，是因为原生锚点只认元素的offsetTop，单纯调整内边距外边距只会改变元素布局，不会修正锚点的定位逻辑。

两种可行的解决办法： #

1. 修改JS滚动逻辑（推荐）

找到site.js里负责平滑滚动的代码，手动计算滚动位置时减去导航栏的高度：

// 获取粘性导航栏的高度
const navbarHeight = document.querySelector('.sticky-navbar').offsetHeight;
// 定位目标区块
const targetEl = document.querySelector(你的目标选择器);
// 计算最终滚动位置：区块顶部偏移量 - 导航栏高度
const scrollToPos = targetEl.offsetTop - navbarHeight;

// 执行平滑滚动
window.scrollTo({
  top: scrollToPos,
  behavior: 'smooth'
});

这样滚动后，目标区块会刚好显示在导航栏下方，避免被遮挡。

2. CSS调整目标区块（无需改JS）

给每个需要跳转的目标区块添加以下样式：

.section-target {
  padding-top: 70px; /* 数值等于你的粘性导航栏高度 */
  margin-top: -70px; /* 抵消padding带来的布局偏移 */
}

这个方法是通过padding给区块顶部预留导航栏的空间，再用负margin把区块的实际位置拉回原位置，既不破坏页面布局，又能让锚点滚动定位到预留的空间顶部，内容不会被导航栏挡住。

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