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