Function to create a movement of some item while scrolling
// Defining the menu items
let topItemOne = document.querySelector('#menu-item-239');
let topItemTwo = document.querySelector('#menu-item-240');
let topItemThree = document.querySelector('#menu-item-241');
let topItemFour = document.querySelector('#menu-item-242');
// Defining where the breakpoint is
let breakPointOne = document.querySelector('#breakpoint1');
let breakPointTwo = document.querySelector('#breakpoint2');
let breakPointThree = document.querySelector('#breakpoint3');
let breakPointFour = document.querySelector('#breakpoint4');
window.addEventListener('scroll', function(ev) {
let distanceToTopOne = breakPointOne.getBoundingClientRect().top - 110;
let distanceToTopTwo = breakPointTwo.getBoundingClientRect().top - 110;
let distanceToTopThree = breakPointThree.getBoundingClientRect().top - 110;
let distanceToTopFour = breakPointFour.getBoundingClientRect().top - 110;
if (distanceToTopOne > 0) {
topItemOne.classList.remove('focccus');
}
if (distanceToTopOne < 0) {
topItemOne.classList.add('focccus');
}
if (distanceToTopTwo > 0) {
topItemTwo.classList.remove('focccus');
}
if (distanceToTopTwo < 0){
topItemTwo.classList.add('focccus');
topItemOne.classList.remove('focccus');
}
if (distanceToTopThree > 0) {
topItemThree.classList.remove('focccus');
}
if (distanceToTopThree < 0){
topItemThree.classList.add('focccus');
topItemTwo.classList.remove('focccus');
}
if (distanceToTopFour > 0) {
topItemFour.classList.remove('focccus');
}
if (distanceToTopFour < 0){
topItemFour.classList.add('focccus');
topItemThree.classList.remove('focccus');
}
});