<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>
Plain Vanilla Scroll Spy in Javascript
by
Tags: