position: sticky 表现异常？滚动事件获取元素位置不符咨询

首先咱们得先搞懂position: sticky的工作逻辑：当你给元素设置top: 0后，它会在页面滚动到元素顶部触及视口顶部时，固定在视口顶部；在这之前，它会老老实实待在文档流的初始位置——也就是你说的距离文档起始位置42px处（对应未滚动时距离视口顶部42px）。

你遇到的问题核心是：Chrome控制台显示的是元素进入sticky状态后的视口位置（top:0），但你需要的是它在文档流里的初始位置，或者准确判断何时触发sticky状态来添加过渡类。

下面是具体的解决步骤和代码示例：

1. 先记录元素的初始文档位置 #

页面加载完成后，先存下元素在文档流中的初始偏移量（距离文档顶部的距离），这个值就是你提到的42px（假设上方元素高度刚好是42px）：

$(document).ready(function() {
  // 保存元素初始的文档偏移位置
  const stickyNavInitialOffset = $('.top-head').offset().top;
  
  // 监听滚动事件
  $(window).scroll(function() {
    const currentScrollTop = $(window).scrollTop();
    
    // 判断：当滚动距离超过元素初始偏移量时，元素进入sticky状态
    if (currentScrollTop >= stickyNavInitialOffset) {
      $('.top-head').addClass('someClass');
    } else {
      $('.top-head').removeClass('someClass');
    }
  });
});

2. 实时获取元素的视口位置（区分sticky状态） #

如果你确实需要拿到元素相对于视口的实时位置，应该用原生的getBoundingClientRect()方法，它的返回值是完全基于视口的：

const navRect = $('.top-head')[0].getBoundingClientRect();
console.log('当前距离视口顶部的距离：', navRect.top);

• 页面未滚动时，navRect.top会显示42px（元素在文档流中的初始视口位置）；
• 当滚动到元素粘住后，navRect.top会固定为0（因为设置了top:0）。

3. 确保过渡效果生效的小细节 #

要让someClass的过渡动画正常工作，得给元素的相关CSS属性加上transition声明：

.top-head {
  position: sticky;
  top: 0;
  /* 基础样式示例 */
  height: 60px;
  background-color: #ffffff;
  /* 添加过渡动画 */
  transition: all 0.3s ease-in-out;
}

.top-head.someClass {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
}

为什么你的控制台一直显示top:0？ #

大概率是因为你在元素已经进入sticky固定状态后才获取位置，或者误用了position().top——这个方法是获取元素相对于最近定位父元素的位置，如果父元素是未定位的body，它只会返回元素在文档流中的初始top值，而当元素变成sticky后，这个值不会实时更新，因为sticky是相对于视口而非父元素的。

根据你的需求选择offset().top（文档相对位置）或getBoundingClientRect().top（视口相对位置）就可以解决这个问题啦。

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