求助：Safari浏览器中粘性导航（Sticky Navigation）始终固定在顶部的异常问题

各位开发者朋友好，我最近做了一个粘性导航功能，用Intersection Observer来控制导航的固定状态，代码如下：

我的CSS代码 #

.sticky {
  position: -webkit-sticky;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 8rem 0 8rem;
  background-color: var(--border-color);
  width: 100%;
  z-index: 9999;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} 

我的JS代码 #

const navHeight = mainNav.getBoundingClientRect().height;
const obsCallback = function (entries) {
  const [entry] = entries;
  if (!entry.isIntersecting) {
    mainNav.classList.add(`sticky`);
  } else {
    mainNav.classList.remove(`sticky`);
  }
};
const headerObserver = new IntersectionObserver(obsCallback, {
  root: null,
  threshold: 0.01,
  rootMargin: `-${navHeight}px`,
});
headerObserver.observe(header);

本来在Chrome、Firefox里都正常，但在Safari里导航直接一直固定在顶部，不会随着页面滚动回去而取消固定状态，有没有遇到过类似问题的朋友？求指点一下怎么修复！

针对这个问题的修复建议（来自社区经验） #

1. 去掉CSS中冲突的定位属性

你的.sticky类里同时写了position: -webkit-sticky和position: fixed，这在Safari里会造成定位逻辑冲突——毕竟sticky和fixed是完全不同的定位机制，浏览器可能直接优先采用fixed，导致后续的类切换逻辑失效。

建议修改CSS，只保留fixed定位，同时加上box-sizing: border-box避免宽度溢出：

.sticky {
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 8rem; /* 简化重复的padding写法 */
  background-color: var(--border-color);
  width: 100%;
  z-index: 9999;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  box-sizing: border-box; /* 关键：防止width:100%加padding导致横向滚动 */
}

2. 调整Intersection Observer的参数适配Safari

Safari对rootMargin的动态数值处理有时候会有偏差，建议优化参数写法，同时确保navHeight是正确的数字类型：

// 确保高度是整数，避免字符串拼接异常
const navHeight = parseInt(mainNav.getBoundingClientRect().height, 10);
const obsCallback = function (entries) {
  const [entry] = entries;
  if (!entry.isIntersecting) {
    mainNav.classList.add(`sticky`);
  } else {
    mainNav.classList.remove(`sticky`);
  }
};
const headerObserver = new IntersectionObserver(obsCallback, {
  root: null,
  threshold: 0, /* 改成0更精准：当header完全离开视口时触发 */
  rootMargin: `-${navHeight}px 0 0 0`, /* 明确四个方向的margin值 */
});
headerObserver.observe(header);

3. 检查header元素的父容器样式

如果header嵌套在有overflow: hidden的父容器里，Intersection Observer的监听会失效，导致无法正确触发回调。检查一下header的父元素，确保没有设置overflow: hidden或者transform这类会改变视口上下文的属性。

4. 备选方案：用滚动事件做兼容

如果上面的方法都不行，可以试试传统的滚动事件监听作为Safari的兼容方案：

let lastScrollPos = window.scrollY;
const navHeight = parseInt(mainNav.getBoundingClientRect().height, 10);

function handleNavSticky() {
  const currentScrollPos = window.scrollY;
  // 向下滚动超过导航高度时固定，回到顶部范围内时取消
  if (currentScrollPos > navHeight && currentScrollPos > lastScrollPos) {
    mainNav.classList.add('sticky');
  } else if (currentScrollPos <= navHeight) {
    mainNav.classList.remove('sticky');
  }
  lastScrollPos = currentScrollPos;
}

// 添加滚动监听
window.addEventListener('scroll', handleNavSticky);
// 页面卸载时移除监听，避免内存泄漏
window.addEventListener('beforeunload', () => {
  window.removeEventListener('scroll', handleNavSticky);
});

备注：内容来源于stack exchange，提问作者Hamed Fathi