Parallax Vanilla JS

let stopper = false;
let y = 0;
let count = 0;
const _dot = document.getElementById('dot');

window.addEventListener('scroll', function() {
	y = window.scrollY;
	console.log("Y " + y);

	if(y <= 100) {
		window.addEventListener("wheel", MouseWheelHandler, false);
	}
}, false);

function MouseWheelHandler(event) {

	prevent(event);
	event.deltaY < 0 ? console.log('scrolling up'):console.log('scrolling down');
	count++;
	let newLeft = 600;
	newLeft -= 1;
	var ccc;
	console.log('NEWLEFT1 ' + newLeft);

	// if (event.deltaY > 0 && newLeft > 500) {
	if (event.deltaY > 0 && stopper == false) {
		dot.style.left = (600 - count * 3) + 'px';
		console.log(dot.style.left);
		newLeft = parseInt(dot.style.left);

		console.log('NEWLEFT 2 ' + newLeft);
	}
	else if (event.deltaY < 0 && stopper == false){
		console.log('CURRENNT LEFT: ' + dot.style.left);
		// dot.style.left = (dot.style.left + count) + 'px';
		ccc = parseInt(dot.style.left);
		// dot.style.left = (dot.style.left + count) + 'px';
		dot.style.left = (ccc + count) + 'px';
		newLeft = dot.style.left;
	}

	if (newLeft <= 500 || newLeft >= 600) {
		stopper = true;
	}
	else if (newLeft > 500 || newLeft < 600)  {
		stopper = false;
	}
}
var prevent = function prevent(x) {
	if (!stopper) {
		console.log('preventing');
		return x.preventDefault();
	}
}

let stopper = false;
let y = 0;
let count = 0;
const _dot = document.getElementById('dot');
let newLeft = 600;
let down = false;

window.addEventListener('scroll', function() {
	y = window.scrollY;
	console.log("Y " + y);

	if(y >= 100 || !down) {
		console.log('OUT OF FIELD');
		down = true;
		return;
	}
	else if (y <= 99 || down){
		window.addEventListener("wheel", MouseWheelHandler, false);
		down = false;
	}
}, false);

function MouseWheelHandler(event) {

	prevent(event);
	event.deltaY < 0 ? console.log('scrolling up'):console.log('scrolling down');
	count++;
	
	console.log('NEWLEFT1 ' + newLeft);

	//scroll down
	if (event.deltaY > 0 && stopper === false) {
		dot.style.left = (newLeft - count) + 'px';
		console.log(dot.style.left);
		newLeft = parseInt(dot.style.left);

		console.log('NEWLEFT 2 ' + newLeft);
	}
	//scroll up
	else if (event.deltaY < 0 && stopper === false) {
		console.log('CURRENNT LEFT: ' + newLeft);
		dot.style.left = (newLeft + count) + 'px';
		newLeft = parseInt(dot.style.left);
	}

	if (newLeft <= 500 || newLeft >= 700) {
		stopper = true;
	}
	else if (newLeft >= 501 || newLeft <= 699)  {
		stopper = false;
	}
}

const prevent = function prevent(x) {
	if (!stopper) {
		console.log('preventing');
		return x.preventDefault();
	}
}