Intersection Observer报错Argument 1 is not an object如何解决

抛出Intersection Observer Error: "Argument 1 is not an object"的核心原因是你传给observe()方法的观察目标不是合法的DOM对象，具体问题点：

• 最直接的错误是querySelector选择器写法不对：CSS选择器匹配类名要在前面加.，匹配id要加#，你直接写navBarContainer、myImageHeader，只会查找页面上叫这两个名字的自定义标签，找不到的时候querySelector会返回null。你最后执行imageHeaderObserver.observe(imageHeader)的时候，传入的是null，不符合方法要求的Element类型参数，直接触发报错。
• 代码里还有个小隐患：IntersectionObserver回调的第二个参数是观察者实例本身，你给这个形参起的名字imageHeaderObserver和外部声明的观察者常量完全重名，会造成作用域变量遮蔽，后续如果要在回调里调用观察者的方法（比如unobserve）会出问题。

1. 先确认两个元素的属性：如果是class就给选择器加.前缀，如果是id就加#前缀
2. 把回调里重名的形参改掉，避免变量冲突
3. 最好加一层空值判断，避免DOM没加载完、元素不存在时的报错

修复后的完整代码（示例按class选择器编写，如果你用的是id把.换成#即可）：

const header = document.querySelector(".navBarContainer");
const imageHeader = document.querySelector(".myImageHeader");

const imageHeaderOptions = {
  rootMargin: "-50px 0px 0px 0px"
};

const imageHeaderObserver = new IntersectionObserver(
  function(entries, observer) {
    entries.forEach(entry => {
      if (!entry.isIntersecting) {
        header.classList.add("scrolled");
      } else {
        header.classList.remove("scrolled");
      }
    });
  },
  imageHeaderOptions
);

// 元素存在时才启动观察
if (header && imageHeader) {
  imageHeaderObserver.observe(imageHeader);
}

小提示：如果改完选择器还是拿不到元素，检查下JS脚本的执行位置，不要放在对应DOM元素的前面，要么把脚本移到</body>标签前，要么把DOM查询和观察逻辑放到DOMContentLoaded事件回调里执行。

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