DEV Community

UgbabeOG
UgbabeOG

Posted on • Updated on

why is my intersectionObserver not recognizing <section> tag?

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);
});

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (2)

Collapse
 
jordeguevara profile image
Jorde G

what does const sections = document.querySelectorAll("section");
console.log(sections) output?

It seems like its empty so might be something with document.querySelectorAll invoked at wrong time maybe?

Collapse
 
ugbabeog profile image
UgbabeOG • Edited

sections variable is supposed to contain all the sections elements form the html file.
But how could it be empty, the html file has sections in it three section tags.
I really don't know what's wrong.. shows no errors