add and remove classes with respective to activeIndex using javascript
Question
Im trying to move sections up and down on the wheel event by changing class on previous, inView and next sections. so every wheel event will change the activeIndex and hence classes to each sections. Also when the window is loaded the starting activeIndex = 0 so that it always starts from the top. i want to know is my approach correct? is it correct to add class to activeIndex and classes to sections before and after like:
Var previousSection = section[activeIndex - 1];
previousSection.classList.add("previous")
Var inViewSection = section[activeIndex];
inViewSection.classList.add("inView");
Var nextSection = section[activeIndex + 1];
nextSection.classList.add("next");
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
home, body {
margin: 0;
padding: 0;
overflow: hidden;
user-select: none;
}
section {
position: absolute;
left: 0;
width: 100vw;
height: 100vh;
transition: 1s ease-out;
}
.first {background-color:black;}
.second {background-color:red;}
.third {background-color:blue;}
.fourth {background-color:green;}
.fifth {background-color:yellow;}
.inView {top: 0;}
.previous {top: -100vh;}
.next {top: 100vh;}
</style>
<script>
window.load = function() {
var activeIndex = 0;
}
window.addEventListener("wheel", event => {
const delta = Math.sign(event.deltaY);
//console.info(delta);
if (delta > 0) {
nextSection();
}
else if (delta < 0) {
previousSection();
}
});
section: document.querySelectorAll(".section");
activeIndex: 0;
function nextService() {
if (activeIndex = sections.length) return;
let previousService = section[activeIndex - 1];
previousService.classList.add("previous");
let activeService = section[activeIndex];
activeService.classList.add("inView");
let nextService = section[activeIndex + 1];
nextService.classList.add("next");
activeIndex++;
//update the above variables
}
</script>
</head>
<body>
<section class="first section"></section>
<section class="second section"></section>
<sectionc class="third section"></sectionc>
<section class="fourth section"></section>
<section class="fifth section"></section>
</body>
</html>
1 answers
solution1
0 2020-05-08 10:47:16
You can't use Var as capital letter. It must be var with lowercase.
Wrong
Var previousSection = section[activeIndex - 1];
Var inViewSection = section[activeIndex];
Var nextSection = section[activeIndex + 1];
Correct
var previousSection = section[activeIndex - 1];
var inViewSection = section[activeIndex];
var nextSection = section[activeIndex + 1];
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.