Coder Wrap provides free to use snippets Coder Wrap provides free to use snippets

Back to HTML
Preview Source Code
Download
HTML
CSS
 /**Typeo CSS Start**/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
*{ box-sizing: border-box;}
ul, li , a { list-style: none; padding: 0px; margin: 0px; text-decoration: none; }
body { font-family: Poppins; padding: 20px; margin: 0px;}
/**Typeo CSS End**/
.faq-list-scn {
  width:100%; 
  padding:60px 0px;
}
.faq-list-scn .page-width {
  max-width: 1920px;
margin: auto;
}
.faq-list-scn .row-list { 
  position: relative; 
  width: 100%; 
  display: flex; 
  flex-flow: row wrap;
}
.faq-list-scn .row-list .col {
  max-width: 50%; 
  width: 100%;
}
.faq-list-scn .row-list .col.faq--nav--holder {
  max-width: 25%;
}
.faq-list-scn .faq--nav {
  position: sticky; 
  top: 146px;
}
.faq-list-scn .faq--nav li {
  text-transform: uppercase; 
  font-size: 12px; 
  margin-bottom: 10px;
}
.faq-list-scn .faq--nav li a { 
  color:#000; 
  cursor: pointer; 
  font-size: 12px;
}
.faq-list-scn .faq--nav li.active a {
  text-decoration: underline;
}
.faq-list-scn .row-list h1 {
  font-size: 38px; 
  line-height: 40px; 
  letter-spacing: -.02em; 
  margin: 0px; 
  text-transform: uppercase;
}
.faq-list-inner-scn h3 {
  font-weight: 900; 
  font-size: 16px; 
  letter-spacing: .1em; 
  text-transform: uppercase; 
  font-family: inherit; 
  padding: 60px 0 20px 0; 
  margin: 0px;
}
JS
document.addEventListener("DOMContentLoaded", function() {
  var scrollLinks = document.querySelectorAll('.faq-list-scn .faq--nav li a');
  
  // Smooth scrolling
  scrollLinks.forEach(function(scrollLink) {
    scrollLink.addEventListener("click", function(e) {
      e.preventDefault();
      var target = this.getAttribute("href");
      var targetElement = document.querySelector(target);
      var offsetTop = targetElement.offsetTop - 60;
      
      window.scrollTo({
        top: offsetTop,
        behavior: "smooth"
      });
    });
  });
  
  // Active link switching
  window.addEventListener("scroll", function() {
    var scrollbarLocation = window.pageYOffset;
    
    scrollLinks.forEach(function(scrollLink) {
      var target = scrollLink.getAttribute("href");
      var targetElement = document.querySelector(target);
      var sectionOffset = targetElement.offsetTop - 100;
      
      if (sectionOffset <= scrollbarLocation) {
        scrollLink.parentNode.classList.add('active');
        var siblings = scrollLink.parentNode.parentNode.children;
        for (var i = 0; i < siblings.length; i++) {
          if (siblings[i] !== scrollLink.parentNode) {
            siblings[i].classList.remove('active');
          }
        }
      }
    });
  });
});

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *