Inside of this navigation function, I have a click event that scrolls to sections which are offset by the fixed header height. I also have a scroll event which changes the links' color when the scroll section top is reached. Inside of the click even I am referencing sections using id and element. Inside of the scroll event I am iterating over sections and referencing them using section and section id. I also have two foreach()s which I know is redundant. I have spent two days trying to use one for each and reference the section only once. In short, I simply want to change the link to active when the section is scrolled to or clicked on. I don't want the header to cover the section title when I click on the section which is what happens if I remove the click event.
I tried removing the click event but the header covers the section to title on click.
// Navigation
function navigation() {
// Document Variables
const links = document.querySelectorAll('.scroll-link');
const sections = document.querySelectorAll('.page-section');
const header = document.querySelector('.nav-center');
// Change Link style When Scroll To Section
let currentSection = 'home';
window.addEventListener('scroll', () => {
sections.forEach((section) => {
let offsetSection = section.offsetTop - section.clientHeight / 4;
if (window.scrollY >= offsetSection) {
currentSection = section.id;
}
});
links.forEach((link) => {
if (link.href.includes(currentSection)) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
// Add Arrow When ScrollY is 1300 from top
const arrow = document.querySelector('.arrow');
if (window.scrollY > 1300) {
arrow.classList.add('show-arrow');
} else {
arrow.classList.remove('show-arrow');
}
});
// Onclick scroll to section top less fixed header height
links.forEach((link) => {
link.addEventListener('click', (e) => {
e.preventDefault();
const id = e.target.getAttribute('href').slice(1);
const element = document.getElementById(id);
let headerHeight = header.getBoundingClientRect().height;
let position = element.offsetTop - headerHeight;
window.scrollTo({
left: 0,
top: position,
behavior: 'smooth',
});
});
});
}
navigation();
// CAROUSEL
function imageCarousel() {
const slides = document.querySelectorAll('.slide');
// position slides 0, 100, 200, 300 etc to left
slides.forEach((slide, index) => {
slide.style.left = `${index * 100}%`;
});
let counter = 0;
const carousel = () => {
if (counter > slides.length - 1) {
counter = 0;
}
// moves slides to the right
slides.forEach((slide, index) => {
slide.style.transform = `translateX(-${counter * 100}%)`;
});
// dots
const dots = document.querySelectorAll('.dot');
dots.forEach((dot, index) => {
if (counter === index) {
dot.style.backgroundColor = 'red';
} else {
dot.style.backgroundColor = 'transparent';
}
});
};
setInterval(() => {
counter++;
carousel();
}, 2000);
}
imageCarousel();* {
box-sizing: border-box;
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
}
.nav-center {
background-color: black;
color: white;
text-align: center;
font-size: 1.2rem;
padding: 1rem 0;
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 5000;
}
html {
scroll-behavior: smooth;
}
.nav-links {
display: flex;
justify-content: space-evenly;
}
.nav-links a {
color: white;
}
.nav-links a:hover {
color: yellow;
}
.nav-links a.active {
color: red;
}
.hero {
width: 100%;
height: 500px;
position: relative;
margin-top: 15px;
}
.hero h2 {
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
color: white;
font-size: 3rem;
}
.slide-container {
width: 100%;
height: 100%;
position: relative;
background: black;
overflow: hidden;
}
.slide-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
z-index: 2000;
background-attachment: fixed;
}
.slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.slide1 {
background: url('slide1.jpg') no-repeat center/cover;
}
.slide2 {
background: url('slide2.jpg') no-repeat center/cover;
}
.slide3 {
background: url('slide3.jpg') no-repeat center/cover;
}
.slide4 {
background: url('slide4.jpg') no-repeat center/cover;
}
.slide5 {
background: url('slide5.jpg') no-repeat center/cover;
}
.dots-container {
position: absolute;
width: 25%;
top: 85%;
left: 50%;
display: flex;
gap: 1rem;
}
.dot {
width: 15px;
height: 15px;
border-radius: 100px;
border: 2px solid black;
}
main .page-section {
width: 80%;
margin: 4rem auto;
}
main .page-section h2 {
text-align: center;
margin-bottom: 1rem;
}
main p {
line-height: 1.5;
}
.services {
background-color: aquamarine;
}
.about {
background-color: lightcoral;
}
.contact {
background-color: lightslategray;
}
.arrow {
font-size: 3rem;
color: black;
position: fixed;
bottom: 2rem;
right: 2rem;
animation: bounce 1s ease infinite;
visibility: hidden;
}
@keyframes bounce {
0% {
scale: 1;
}
50% {
scale: 1.5;
}
100% {
scale: 1;
}
}
.show-arrow {
visibility: visible;
z-index: 2000;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<script
src="https://kit.fontawesome.com/ab53afcc49.js"
crossorigin="anonymous"
></script>
<title>Document</title>
</head>
<body>
<header id="home" class="page-section">
<h1>Bounding Client</h1>
<nav class="nav-center">
<ul class="nav-links">
<li><a href="#home" class="scroll-link active">Home</a></li>
<li><a href="#services" class="scroll-link">Services</a></li>
<li><a href="#about" class="scroll-link">About</a></li>
<li><a href="#contact" class="scroll-link">Contact</a></li>
</ul>
</nav>
<section class="hero">
<h2>Scroll & BoundingClientRECT</h2>
<div class="slide-container">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
<div class="slide slide4"></div>
<div class="slide slide5"></div>
</div>
<div class="dots-container">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
<div class="dot dot4"></div>
<div class="dot dot5"></div>
</div>
</section>
</header>
<main>
<section class="services page-section" id="services">
<h2>Services</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam placeat
explicabo cumque! Iure earum rerum nam magnam, consequuntur enim ipsa
quibusdam accusantium, sapiente rem, ducimus assumenda ipsam similique
omnis atque sunt placeat quidem voluptatibus. Sed hic sint explicabo
architecto reiciendis iste nesciunt ut dicta quas itaque, laborum
pariatur nemo repellendus ullam, vel assumenda consequuntur
temporibus? Porro mollitia quibusdam labore dignissimos? Officia sunt
deserunt in fugit labore quisquam vitae magni iure! Deserunt
laudantium minus, illo voluptatem odit hic suscipit quia, perferendis
dolorem nulla nisi obcaecati! Quibusdam totam voluptate dolorum eaque
facere, dolore explicabo ratione itaque, facilis excepturi commodi
voluptatum, officiis quos voluptas dicta! Optio minus recusandae sunt
impedit numquam hic quos voluptatibus aliquam rem sit error dolorum
veniam sint iure, cupiditate assumenda et quis, excepturi ut ipsum
quod exercitationem ducimus! Ullam, esse quibusdam! Laborum veniam vel
dicta amet excepturi ex eos quos, voluptatem dolorum velit corrupti
nulla, assumenda, quis repellat non dignissimos enim voluptatibus
veritatis illum tempora illo neque! Quia doloremque quos nemo deserunt
voluptatibus, eligendi animi, quo facilis ipsa illo voluptate eveniet.
Alias expedita natus ducimus sequi, vitae recusandae quisquam. Dolores
rem, cum velit voluptatem, sunt perferendis iste veritatis nihil
dignissimos nobis dolorem quia inventore. Recusandae tempore porro
dolorem laboriosam!
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur,
sapiente illum. Incidunt minima fuga sed ullam doloribus suscipit
voluptate iure dignissimos facere, quidem cum veritatis necessitatibus
reprehenderit in. Modi vitae rerum harum sunt enim assumenda iusto
quas consectetur dicta numquam. Quae ratione at tempora, cum
repudiandae quis molestias temporibus laudantium nisi sint est iste
culpa unde harum, eveniet quo recusandae libero voluptatibus? Beatae
eos sapiente exercitationem omnis porro est aut distinctio atque
laboriosam similique, ex suscipit inventore voluptas et eveniet unde
tempora deleniti architecto, odit reiciendis sunt? Suscipit distinctio
recusandae iste officia, nobis architecto quod quisquam corrupti ut
aliquam, magnam odio pariatur unde corporis sunt molestiae
necessitatibus ea molestias provident nesciunt quam, veritatis tenetur
enim! Voluptate, non ipsam similique perspiciatis officia autem, porro
facilis officiis dolorum corrupti voluptatum aut cum aspernatur!
Molestiae dolore, ipsam rerum provident unde aperiam quaerat nam aut
impedit ullam? Neque sapiente velit corporis ex minus harum tempora
sed saepe similique eligendi accusamus dignissimos iure doloremque,
fugit dolorem unde necessitatibus perspiciatis! Dignissimos cupiditate
fugit repellat, deleniti numquam aliquid aliquam magni dolores ab
suscipit perferendis autem asperiores quod minima, laborum dolorum
reprehenderit accusantium cumque possimus unde deserunt. Ex optio
adipisci sequi numquam totam nemo at earum itaque rem, et facilis
quam, in voluptatum voluptatem. Eaque magni reprehenderit, ut
blanditiis quasi, tempora quo alias, unde illum maxime aperiam tempore
voluptatibus soluta delectus? Sint amet debitis facilis reprehenderit
eos sequi quos vitae nobis quo. Ad aliquid animi adipisci earum
exercitationem id nihil voluptates, beatae tempore molestias deserunt.
Vel blanditiis praesentium ratione maiores facere et veniam omnis iure
ea enim temporibus quis eius aut, harum nam, quas hic provident,
accusamus nulla! Beatae ut, maxime labore sequi quibusdam nisi cumque
nesciunt ullam quia temporibus expedita dolorem enim, architecto
minima ducimus illum ipsum fugiat incidunt cum omnis! Cupiditate nisi,
nobis dolores corrupti sit eligendi pariatur ipsam ab, atque illo
doloremque repellat ipsum voluptatum officia ducimus commodi sed?
Minus necessitatibus rem obcaecati itaque, voluptatem esse a quaerat
iste, perferendis commodi at praesentium possimus aut ea aliquam
quidem beatae sequi nobis quos. Quae nam blanditiis saepe voluptatum!
Id quibusdam, architecto aspernatur minus saepe doloremque cumque
adipisci ipsum accusantium nobis cum officiis omnis minima, quasi
eius, nisi officia ad quod asperiores suscipit rerum illo? Temporibus
itaque magni quis doloremque voluptas ad, ab iste sequi, at aut sed
ipsam fuga ipsa et officia atque odio. Explicabo consequatur
laboriosam ullam vero exercitationem recusandae eius, iusto qui,
temporibus quaerat natus ducimus velit totam. Porro expedita
laudantium explicabo voluptas blanditiis quasi amet doloribus quam,
deleniti fugit ipsa possimus repudiandae consequuntur sunt corrupti
earum voluptate! Cum quibusdam impedit eaque ad officiis a nobis
voluptatum explicabo recusandae, eum temporibus quae id dicta quidem
rem cupiditate eius. Dolor obcaecati harum cupiditate impedit
perspiciatis non libero maiores expedita? Neque nulla odit tenetur!
Obcaecati reprehenderit ad, dignissimos dolor quia iste dolorum
repudiandae officiis praesentium, quisquam accusantium veniam eveniet
quasi est deserunt in eum possimus sapiente architecto consequuntur
porro aliquid placeat quae libero. Doloremque consequuntur harum
voluptate nemo! Velit corrupti eligendi sed eos obcaecati. Totam, ea.
</p>
</section>
<section class="about page-section" id="about">
<h2>About</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam placeat
explicabo cumque! Iure earum rerum nam magnam, consequuntur enim ipsa
quibusdam accusantium, sapiente rem, ducimus assumenda ipsam similique
omnis atque sunt placeat quidem voluptatibus. Sed hic sint explicabo
architecto reiciendis iste nesciunt ut dicta quas itaque, laborum
pariatur nemo repellendus ullam, vel assumenda consequuntur
temporibus? Porro mollitia quibusdam labore dignissimos? Officia sunt
deserunt in fugit labore quisquam vitae magni iure! Deserunt
laudantium minus, illo voluptatem odit hic suscipit quia, perferendis
dolorem nulla nisi obcaecati! Quibusdam totam voluptate dolorum eaque
facere, dolore explicabo ratione itaque, facilis excepturi commodi
voluptatum, officiis quos voluptas dicta! Optio minus recusandae sunt
impedit numquam hic quos voluptatibus aliquam rem sit error dolorum
veniam sint iure, cupiditate assumenda et quis, excepturi ut ipsum
quod exercitationem ducimus! Ullam, esse quibusdam! Laborum veniam vel
dicta amet excepturi ex eos quos, voluptatem dolorum velit corrupti
nulla, assumenda, quis repellat non dignissimos enim voluptatibus
veritatis illum tempora illo neque! Quia doloremque quos nemo deserunt
voluptatibus, eligendi animi, quo facilis ipsa illo voluptate eveniet.
Alias expedita natus ducimus sequi, vitae recusandae quisquam. Dolores
rem, cum velit voluptatem, sunt perferendis iste veritatis nihil
dignissimos nobis dolorem quia inventore. Recusandae tempore porro
dolorem laboriosam!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
inventore assumenda culpa ea porro ipsam consequatur, non error et
facere quia nihil doloremque dolor tempore vero natus saepe
exercitationem aliquid pariatur nemo itaque praesentium voluptate? Cum
labore officiis tempore ab accusamus enim, iste quod, quaerat a
aperiam quas, delectus deleniti optio rem totam suscipit! Tempore iure
autem accusantium alias eligendi laboriosam architecto sed. Eveniet
eligendi, vel sint ipsa id iste consequatur. Corrupti sed ipsa, ipsum
eveniet vel voluptatum labore aliquam consequuntur accusantium
exercitationem architecto harum asperiores sint id, voluptate dolorum
consectetur voluptas odio praesentium similique qui molestiae. Beatae
voluptatum placeat omnis aut debitis exercitationem recusandae id,
incidunt veritatis obcaecati hic eius perferendis inventore rerum
dolorem quod velit asperiores corrupti odit officiis repellendus
facere autem. Odio amet quasi, saepe nulla incidunt voluptas qui eum
dicta modi dolor ut deleniti. Veritatis impedit animi alias maiores
aspernatur, itaque debitis perferendis repellat qui consequatur,
corrupti quis enim optio accusamus veniam consequuntur laborum ullam
libero molestiae architecto odit! Nisi consequatur itaque eaque
reprehenderit deleniti? Magnam nihil suscipit saepe at perspiciatis
unde animi veniam ipsa autem quidem. Nemo, eligendi. Minus aut, modi
harum sapiente omnis est quo, quasi adipisci, vel excepturi nisi
veniam magni. Nemo laudantium natus quibusdam sit blanditiis
reiciendis laboriosam quia voluptatum? Omnis illo ducimus tenetur
ullam ipsam dolores architecto? Ea dolore error impedit. Quos aperiam
aliquam cum autem exercitationem rem optio odit sed quas vero, vitae
eos neque ad temporibus delectus illo. Soluta ab doloribus dolores
ratione quod perspiciatis veniam voluptatum ad libero consectetur
distinctio qui suscipit nulla, sint odio et pariatur id officiis
voluptatem vero. Perferendis ut reprehenderit doloribus? Minima
dolores placeat unde quo ipsa doloremque! Optio commodi eveniet saepe
nisi, reiciendis est provident magnam debitis eius expedita eligendi
quas doloremque beatae quia tempora. Recusandae maxime eos sunt quo,
cumque adipisci magnam vitae fugiat. Eos labore, modi explicabo quia
necessitatibus beatae. Deserunt quia quidem saepe, distinctio at
eveniet! Iure dolor facilis pariatur cupiditate facere. Harum ex,
accusantium beatae hic, perferendis ut quae voluptatem pariatur quo
tempora provident voluptatibus numquam blanditiis assumenda nisi
laboriosam corporis dolore. Fuga ratione ea consectetur, quia totam
expedita quod deserunt, minus impedit quo necessitatibus eaque animi
ex maxime adipisci voluptas rerum qui. Asperiores corrupti rerum sunt
sint dolore neque consequatur, unde quis eos, quibusdam perspiciatis
deserunt sit rem placeat voluptates dolores sequi incidunt! Quibusdam
accusamus commodi molestiae, iure distinctio modi vel. Illo mollitia
perspiciatis ea, beatae pariatur alias dicta accusamus nostrum iste
tempora saepe dolorem rem quos rerum consequatur quasi aperiam
asperiores? Minus officia iusto praesentium, ullam aspernatur id non
illo fugit eos accusamus consequatur corporis libero eligendi unde
vero. Suscipit nam omnis, beatae similique, vero et quam, sunt officia
mollitia ullam consectetur tempora odit nemo? Laudantium modi ipsam
quae harum molestias, voluptatibus eaque quod aspernatur odit sed
labore reprehenderit quam doloribus. Ullam minima eius, temporibus
odit animi voluptate beatae praesentium tempore modi, nulla soluta,
dolor quia accusamus amet doloribus ipsam! Sed, cum necessitatibus.
Quibusdam quod amet minima modi ducimus commodi repudiandae quidem,
quis neque quia, doloremque ad!
</p>
</section>
<section class="contact page-section" id="contact">
<h2>Contact</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam placeat
explicabo cumque! Iure earum rerum nam magnam, consequuntur enim ipsa
quibusdam accusantium, sapiente rem, ducimus assumenda ipsam similique
omnis atque sunt placeat quidem voluptatibus. Sed hic sint explicabo
architecto reiciendis iste nesciunt ut dicta quas itaque, laborum
pariatur nemo repellendus ullam, vel assumenda consequuntur
temporibus? Porro mollitia quibusdam labore dignissimos? Officia sunt
deserunt in fugit labore quisquam vitae magni iure! Deserunt
laudantium minus, illo voluptatem odit hic suscipit quia, perferendis
dolorem nulla nisi obcaecati! Quibusdam totam voluptate dolorum eaque
facere, dolore explicabo ratione itaque, facilis excepturi commodi
voluptatum, officiis quos voluptas dicta! Optio minus recusandae sunt
impedit numquam hic quos voluptatibus aliquam rem sit error dolorum
veniam sint iure, cupiditate assumenda et quis, excepturi ut ipsum
quod exercitationem ducimus! Ullam, esse quibusdam! Laborum veniam vel
dicta amet excepturi ex eos quos, voluptatem dolorum velit corrupti
nulla, assumenda, quis repellat non dignissimos enim voluptatibus
veritatis illum tempora illo neque! Quia doloremque quos nemo deserunt
voluptatibus, eligendi animi, quo facilis ipsa illo voluptate eveniet.
Alias expedita natus ducimus sequi, vitae recusandae quisquam. Dolores
rem, cum velit voluptatem, sunt perferendis iste veritatis nihil
dignissimos nobis dolorem quia inventore. Recusandae tempore porro
dolorem laboriosam!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem
voluptates, impedit odit repellat similique temporibus officia
dignissimos, enim eligendi pariatur inventore itaque ea debitis!
Excepturi quia deleniti, corrupti numquam animi laborum ipsam natus?
Beatae neque, magni expedita enim commodi doloremque libero,
reiciendis ut assumenda, excepturi eaque nisi ex maxime hic.
Blanditiis tenetur sint voluptatum, exercitationem quasi similique
quibusdam dignissimos quam doloremque, earum ullam nemo voluptate
magnam odit eius officia consectetur optio mollitia? Voluptate modi
ducimus alias magni in. Quibusdam quod vero dicta culpa quo debitis,
ipsam nisi minima adipisci nostrum assumenda asperiores voluptatem in
inventore nemo. Doloribus repudiandae rem perferendis nesciunt debitis
quas corporis sit a quasi sed porro nulla hic, cupiditate quo maxime
officia esse sint eius molestias aut? Repellendus molestiae incidunt
accusamus atque voluptatibus omnis praesentium? Perspiciatis ad iure
ab, laudantium commodi laboriosam possimus quidem quaerat quibusdam
harum nihil ut ipsam nostrum esse temporibus! Quaerat suscipit ad
dolorum, itaque delectus in similique dolore recusandae beatae natus
dolorem obcaecati fugit doloremque non accusamus, explicabo
repudiandae dignissimos sapiente corrupti mollitia molestias tempora
totam officia eos. Labore, tenetur saepe! Ipsum dicta reiciendis,
omnis veritatis necessitatibus fugit saepe deleniti voluptas molestias
asperiores magnam, commodi harum soluta atque eaque nesciunt!
Assumenda quia accusamus nihil fugiat praesentium corporis, et eum
quis asperiores blanditiis dicta odio incidunt beatae nam? Sed, ipsam
magni ea autem quos, minus rerum eveniet nobis eos reiciendis possimus
quia quas tenetur eligendi laudantium numquam ullam similique illum
accusantium explicabo. Iusto quos tempora omnis, vero quibusdam
sapiente reiciendis accusamus itaque eos deserunt et optio ipsam,
quidem autem in repellendus voluptas temporibus nihil ratione.
Quibusdam dolorem omnis, laboriosam aliquam nobis nam enim mollitia,
eveniet, nisi id atque. Nisi aperiam ad eum dolorem architecto
mollitia vero veniam. Quam, error fugiat! Illum magni asperiores
placeat aspernatur doloremque distinctio nihil enim. Dolore numquam
dicta in quas unde sit sunt iure illum ex enim provident facere,
consequuntur placeat eum nemo quia dolorum alias minima dignissimos?
Sed incidunt neque totam delectus similique repellat! Quas cupiditate
accusantium ea in amet, saepe excepturi sunt ab similique rem itaque
voluptate et quisquam deleniti! Ad, illum! Facere, sapiente iure amet
harum praesentium numquam voluptatem minus. Blanditiis dicta
praesentium repellat et nihil culpa repudiandae, debitis
exercitationem ad voluptates, fugiat amet consequatur aut. Amet, ea
maxime impedit aut, animi labore quaerat excepturi dolorem corrupti ad
iure, deserunt modi dignissimos mollitia. Obcaecati consectetur in
necessitatibus iusto suscipit enim maxime? Illo enim autem, temporibus
aliquid rerum, tenetur dolorum eveniet rem, mollitia recusandae totam
provident magni! Quisquam vero veniam nemo expedita mollitia illum
veritatis exercitationem omnis incidunt eaque architecto nihil est
similique nisi voluptates, optio earum! Ad praesentium numquam
temporibus quod iste, commodi corporis odio quaerat facilis porro
repellat, deserunt aut vel hic necessitatibus voluptatem? Vero id unde
aperiam eum ullam maxime impedit, blanditiis totam eaque fugiat
voluptatem temporibus voluptate ad ducimus error iure perferendis
commodi magnam quia odit ex harum sed? Iusto alias culpa cupiditate,
tempore officiis illo minus aliquid nobis nihil molestiae eveniet
dicta perferendis quos corrupti pariatur! Ipsum odio repellat
recusandae iste adipisci dolorem.
</p>
</section>
</main>
<a href="#home" class="scroll-link arrow"
><i class="fa-solid fa-circle-arrow-up"></i
></a>
<footer><p>Lorem, ipsum.</p></footer>
<script src="app.js"></script>
</body>
</html>
