let navStickyBar = document.getElementById('stickyNavbarAutonation'); let nextSection = navStickyBar.parentElement.nextElementSibling; let urlArray = window.location.href.split('/'); let urlParam = urlArray.pop() || urlArray.pop(); let navLinkNames = ["our-purpose", "drive-pink", "one-autonation", "sustainability"]; let navLinks = document.querySelectorAll(".sticky-nav-link"); console.log(urlParam); window.addEventListener('scroll', checkToAddSticky); addActive(urlParam, navLinkNames, navLinks); function addActive(param, linkNames, navLinks) { for(let i = 0; i < linkNames.length; i++) { if (param === linkNames[i]) { navLinks[i].classList.add('active'); if (i >= 2) { navStickyBar.scrollLeft += navLinks[i].getBoundingClientRect().left; } break; } } } function checkToAddSticky() { let check = isOutOfViewport(navStickyBar); let textCheck = isOutOfViewport(nextSection); if (textCheck.top) { if ( !navStickyBar.classList.contains("sticky") ) { navStickyBar.style.opacity = "0"; } navStickyBar.classList.add('sticky'); nextSection.style.paddingTop = '75px'; setTimeout(function() { navStickyBar.style.transition = "all 1s"; navStickyBar.style.opacity = "1"; }, 500); } else if (!textCheck.top) { navStickyBar.classList.remove('sticky'); navStickyBar.style.opacity = "1"; nextSection.style.paddingTop = '0px'; navStickyBar.style.transition = "none"; } } function isOutOfViewport(elem) { // Get element's bounding var bounding = elem.getBoundingClientRect(); // Check if it's out of the viewport on each side var out = {}; out.top = bounding.top < 0; out.left = bounding.left < 0; out.bottom = bounding.bottom > (window.innerHeight || document.documentElement.clientHeight); out.right = bounding.right > (window.innerWidth || document.documentElement.clientWidth); out.any = out.top || out.left || out.bottom || out.right; out.all = out.top && out.left && out.bottom && out.right; return out; }