如何追踪元素底部位置？element.offsetBottom不存在时的JS实现方法

兄弟我太懂你这个坑了！之前做粘性导航的时候也下意识想写offsetBottom，结果发现这根本不是标准的DOM属性😂。别慌，用现有的几个属性组合一下就能轻松算出元素底部的位置，下面给你两种最常用的方案：

方法1：用offsetTop + offsetHeight直接计算 #

这是最直观的方式，适合大多数普通布局场景：

• offsetTop：元素相对于其.offsetParent（一般是body）顶部的距离
• offsetHeight：元素自身的高度（包含边框、内边距，不含外边距）

把两者相加，就能得到元素底部相对于页面顶部的位置：

const heroElement = document.querySelector('.your-hero-class');
const heroBottom = heroElement.offsetTop + heroElement.offsetHeight;

这个值刚好能用来判断滚动位置是否超过了Hero区域，完美适配你的粘性导航需求。

方法2：用getBoundingClientRect()处理复杂布局 #

如果你的Hero元素用了transform、浮动或者其他特殊布局，offsetTop可能会出现偏差，这时候getBoundingClientRect()就更靠谱了。它会返回元素当前渲染后相对于视口的位置信息，其中自带bottom属性：

const heroElement = document.querySelector('.your-hero-class');
const rect = heroElement.getBoundingClientRect();
// rect.bottom 是元素底部相对于视口顶部的距离
// 如果要转换成相对于页面顶部的距离，加上当前滚动距离即可：
const heroBottomPage = rect.bottom + window.scrollY;

额外补充：如果需要包含外边距（margin） #

如果你的Hero元素底部有外边距，且需要把这个距离也算进“底部位置”里，可以用getComputedStyle获取实际的margin值：

const heroElement = document.querySelector('.your-hero-class');
const computedStyles = getComputedStyle(heroElement);
const heroBottomWithMargin = heroElement.offsetTop + heroElement.offsetHeight + parseInt(computedStyles.marginBottom);

给你个滚动监听的实际例子 #

刚好对应你的粘性导航场景：

window.addEventListener('scroll', () => {
  const hero = document.querySelector('.hero');
  const heroBottom = hero.offsetTop + hero.offsetHeight;
  
  if (window.scrollY > heroBottom) {
    document.querySelector('.nav').classList.add('sticky');
  } else {
    document.querySelector('.nav').classList.remove('sticky');
  }
});

两种方法都能解决问题，我自己日常做粘性导航用方法1就足够了，简单高效～

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