why is my intersectionObserver not recognizing <section> tag?
Tags: javascript, tutorial, help
Published: 2023-05-02 09:06:28

Hello, DEVs I created a javaScript function for fluid navBar but, it doesn't work because javascript does not recognize the section tag, no errors in console. here is my javaScript code below:

```
// Get all the sections on the page
const sections = document.querySelectorAll("section");

// Get the bubble element
const bubble = document.querySelector(".bubble");

// Define an array of gradients to be used for the bubble
const gradient = [
  "linear-gradient(to right top, #ffb88c, #de6262)",
  "linear-gradient(to right top, #a73737, #7a2828)",
  "linear-gradient(to right top, #ed4264, #ffedbc)",
];

// Define the options for the IntersectionObserver
const options = {
  threshold: 0.7,
};

// Create an IntersectionObserver instance and pass the callback function and options
let observer = new IntersectionObserver(navCheck, options);

// The callback function that gets called when an intersection occurs
function navCheck(entries) {
  // Loop through all the entries
  entries.forEach((entry) => {
    // Get the class name of the section
    const className = entry.target.className;

    // Get the active anchor with a matching data-page attribute
    const activeAnchor = document.querySelector(`[data-page=${className}]`);

    // Get the gradient index from the data-index attribute
    const gradientIndex = parseInt(entry.target.getAttribute("data-index"));

    // Get the bounding rectangle of the active anchor
    const coords = activeAnchor.getBoundingClientRect();

    // Create an object containing the dimensions and position of the active anchor
    const directions = {
      height: coords.height,
      top: coords.top,
      width: coords.width,
      left: coords.left,
    };

    // If the section is currently intersecting with the viewport
    if (entry.isIntersecting) {
      // Set the background of the bubble to the gradient corresponding to the current section
      bubble.style.background = gradient[gradientIndex];

      // Set the position and dimensions of the bubble to match the active anchor
      bubble.style.setProperty("left", `${directions.left}px`);
      bubble.style.setProperty("top", `${directions.top}px`);
      bubble.style.setProperty("width", `${directions.width}px`);
      bubble.style.setProperty("height", `${directions.height}px`);
    }
  });
}

// Observe all the sections on the page
sections.forEach((section) => {
  observer.observe(section);
});

```
Here is my html code below:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="newproject.css" />
    <script src="projectjs.js"></script>
    <!-- <script src="gpt.js"></script> -->
    <title>lbl</title>
  </head>
  <body>
    <header>
      <nav>
        <h1 class="page-name">Lips By Lams</h1>
        <ul>
          <li><a data-page="home" href="#home">Home</a></li>
          <li><a data-page="about-us" href="#about-us">About Us</a></li>
          <li>
            <a data-page="contact-page" href="#contact-page">Contact Page</a>
          </li>
          <div class="bubble">n</div>
        </ul>
      </nav>
    </header>
    <main>
      <section id="home" data-index="0">
        <h2>home page</h2>
      </section>
      <section id="about-us" data-index="1">
        <h2>about us</h2>
      </section>
      <section id="contact-page" data-index="2">
        <h2>contact page</h2>
      </section>
    </main>
  </body>
</html>
```
here is the CSS code below:

```
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

header {
  box-shadow: 0px 5px 10px -5px rgba(0, 0, 0, 0.3);
  position: sticky;
  top: 0px;
  background-color: #fff;
}

nav {
  min-height: 10vh;
  margin: auto;
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul,
nav h1 {
  font-size: 1.5rem;
  flex: 1;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
}

nav a {
  color: black;
  text-decoration: none;
}

.bubble {
  position: absolute;
  border-radius: 3px;
  z-index: -1;
  background: linear-gradient(to right top, #ffb88c, #de6262);
  transform: scale(2);
  transition: all 0.5s;
}

section {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

section h2 {
  font-size: 5rem;
  color: white;
}

#home {
  background: linear-gradient(to right top, #ffb88c, #de6262);
}

#about-us {
  background: linear-gradient(to right top, #a73737, #7a2828);
}

#contact-page {
  background: linear-gradient(to right top, #ed4264, #ffedbc);
}
```
for context, I am trying to match the (nav) activeAnchor background color to the active section background color, i.e. if in the home section nav home anchor should be the same color as the home section.