Javascript - TypeError: Argument 1 of IntersectionObserver.observe is not an object [duplicate]

I'm trying to use the IntersectionObserver but keep receiving the above error, the code is as follows:

HTML:

<div class="top">

   <div class="toph1">
<h1><span>Turtle</span> Web Designs</h1>
  </div>                     

  <div id="hamburger">
     <div id="hamburger-lines">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
    </div>

     <ul id="menu">
         <li><a href="#showcase">Home</a></li>
         <li><a href="#aboutus">About Us</a></li>
         <li><a href="#cards">Services</a></li>
         <li><a href="#contactus">Contact Us</a></li>
    </ul>
  </div>

Javascript:

let sectionMenu = document.querySelector(".top");

  let options = {
    root: document.querySelector('null'),
    rootMargin: '0px',
    threshold: 1.0   };

  let callback = (entries, observer) => {
    entries.forEach(entry => {
        console.log(entry.target);
    });   };

  let observer = new IntersectionObserver(callback, options);

  observer.observe(sectionMenu);

Any assistance would be greatly appreciated, thank you.