две отдельные функции наблюдения (), наблюдающие за двумя разными элементами, не следят за ними

Question

Я не могу придумать лучшего заголовка, но это ситуация:

Я хочу наблюдать два разных элемента в наблюдателе пересечения.На странице есть один элемент

Мой код сначала выглядел так, как показано ниже:

  // page 1 element to watch
  const titleEl = document.querySelector('.table-header')
  // page 2 element to watch
  const pdTitleEl = document.querySelector('#section h2')
  const stickyPageEl = document.querySelector('.pagination-links--sticky')

  const handler = (entries) => {
    if (!entries[0].isIntersecting) {
      stickyPageEl.classList.add('dropdown-shadow')
    } else {
      stickyPageEl.classList.remove('dropdown-shadow')
    }
  }
  const observer = new window.IntersectionObserver(handler)
  // page 1 observer 
  observer.observe(titleEl)
  // page 2 observer 
  observer.observe(pdTitleEl)

Я ожидал, что он будет смотреть и то, и другое, а если пересечение, то это добавит класс.Это был не тот случай.Я получил:

Uncaught TypeError: Не удалось выполнить «наблюдение» на «IntersectionObserver»: параметр 1 не относится к типу «Элемент».

Я не знаючто это значит.Что такое «параметр 1»?

Часть, которая заставила меня задуматься:

не относится к типу «Элемент».

Я пробовал это:

  // page 1 element to watch
  const titleEl = document.querySelector('.table-header')
  // page 2 element to watch
  const pdTitleEl = document.querySelector('#section h2')
  const stickyPageEl = document.querySelector('.pagination-links--sticky')

  const handler = (entries) => {
    if ((!entries[0].isIntersecting) && (titleEl)) {
  stickyPageEl.classList.add('dropdown-shadow')
} else if ((!entries[0].isIntersecting) && (pdTitleEl)) {
  stickyPageEl.classList.add('dropdown-shadow')
} 
else {
  stickyPageEl.classList.remove('dropdown-shadow')
}
  }
  const observer = new window.IntersectionObserver(handler)
  // page 1 observer 
  observer.observe(titleEl)
  // page 2 observer 
  observer.observe(pdTitleEl)

Что, я думаю, проверяет, существуют ли они первыми, но я все еще получаю ту же ошибку.

Можете ли вы запустить несколько observe() функций на разных элементах или это не так?

РЕДАКТИРОВАТЬ

Как заметил комментатор и я, это, по-видимому, связано с элементами, не существующими в DOM, что имеет смысл.

  // page 1 element to watch
  const titleEl = document.querySelector('.table-header')
  // page 2 element to watch
  const pdTitleEl = document.querySelector('#section h2')
  const stickyPageEl = document.querySelector('.pagination-links--sticky')

  const handler = (entries) => {
    if ((!entries[0].isIntersecting) && (titleEl != null)) {
  stickyPageEl.classList.add('dropdown-shadow')
} else if ((!entries[0].isIntersecting) && (pdTitleEl != null)) {
  stickyPageEl.classList.add('dropdown-shadow')
} 
else {
  stickyPageEl.classList.remove('dropdown-shadow')
}
  }
  const observer = new window.IntersectionObserver(handler)
  // page 1 observer 
  observer.observe(titleEl)
  // page 2 observer 
  observer.observe(pdTitleEl)

Также не работает.

Почему?