Plain Vanilla Scroll Spy in Javascript

<script>
//get id of section with offset 140
//if 140 then find corresponding nav item, add active

function getSectionOffset(){
	section1 = document.getElementById('section1').getBoundingClientRect();
	section2 = document.getElementById('section2').getBoundingClientRect();
	section3 = document.getElementById('section3').getBoundingClientRect();
	section4 = document.getElementById('section4').getBoundingClientRect();
	section5 = document.getElementById('section5').getBoundingClientRect();
	section6 = document.getElementById('section6').getBoundingClientRect();
	//var offsets = document.getElementById('11a').getBoundingClientRect();
	//var top = offsets.top;
	if ( ((section1.top)<140) && ((section2.top)>200)) {
		console.log('section 1 offset is ' + section1.offsetTop);
		paintNav('section1');
	}
	else if ( ((section2.top)<140) && ((section3.top)>200)) {
		console.log('section 2 offset is ' + section2.offsetTop);
		paintNav('section2');
	}
	else if ( ((section3.top)<140) && ((section4.top)>200)) {
		console.log('section 3 offset is ' + section3.offsetTop);
		paintNav('section3');
	}
	else if ( ((section4.top)<140)  && ((section5.top)>200)) {
		console.log('section 4 offset is ' + section4.offsetTop);
		paintNav('section4');
	}
	else if ( ((section5.top)<140)  && ((section6.top)>200)) {
		console.log('section 5 offset is ' + section5.offsetTop);
		paintNav('section5');
	}
	else if ((section6.top)<140) {
		console.log('section 6 offset is ' + section6.offsetTop);
		paintNav('section6');
	}
	else{console.log('no offset found!');}

}

function paintNav(section){
	console.log('PaintNav In');
	theNavItems = document.querySelectorAll('.inline-links__item');
	console.log('section is ' + section);
	if (section=='section1'){
		resetNavPaint();
		theNavItems[0].classList.add('active');
		console.log('Paint s1');
	}
	else if (section=='section2'){
		resetNavPaint();
		theNavItems[1].classList.add('active');
		console.log('Paint s2');
	}
	else if (section=='section3'){
		resetNavPaint();
		theNavItems[2].classList.add('active');
		console.log('Paint s3');
	}
	else if (section=='section4'){
		resetNavPaint();
		theNavItems[3].classList.add('active');
		console.log('Paint s4');
	}
	else if (section=='section5'){
		resetNavPaint();
		theNavItems[4].classList.add('active');
		console.log('Paint s5');
	}
	else if (section=='section6'){
		resetNavPaint();
		theNavItems[5].classList.add('active');
		console.log('Paint s6');
	}
}

function resetNavPaint(){
	theNavItems = document.querySelectorAll('.inline-links__item');
	//reset nav paint
	console.log('resetNavPaint');
	for (i = 0; i < theNavItems.length; i++) {
		theNavItems[i].classList.remove('active');
	}
}

window.onscroll = function() {getSectionOffset()};
</script>

Posted

in

by

Tags: