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.
Top comments (2)
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?
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