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

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Back to Header Options
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; 
	margin: 0px; 
	padding: 0; 
	background-color: #f8f8f8;
}
.fix-wrap {
	max-width: 1200px; 
	width: 100%; 
	margin: auto; 
	padding: 0px 15px;
}
/**Typeo CSS End**/

.header-scn {
    background-color: #e9e9e9;
    position: fixed;
    width: 100%;
    top: 0px;
    left: 0px;
}

.header-scn .header-inner {
    padding: 10px 0;
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.logo {
    color: #000;
    font-size: 36px;
    font-weight: 700;
    text-transform: uppercase;
}
.menu ul {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}
.menu ul li {
    margin: 0 8px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}
.menu ul li a {
    color: #000;
    position: relative;
    padding-bottom: 2px;
}
.menu ul li a:after {
  content: '';
  position: absolute;
  left: 0px;
  right: 0px;
  margin: auto;
  bottom: 0px;
  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  width: 0;
  height: 2px;
  background-color: #023e89;
}
.menu ul li.active a:after, .menu ul li:hover a:after { 
	width: 100%;
}
.menu ul li:hover a,
.menu ul li.active a {
    color: #023e89;
}
.middle-scn {
    width: 100%;
    padding-top: 75px;
}
.banner-scn {
    width: 100%;
    text-align: center;
    background-color: #663b1d;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 38px;
    padding: 100px 0;
}
.onepage-scn h2 {
	font-size: 45px;
}
.onepage-scn {
    width: 100%;
    padding: 40px 0;
    min-height: 500px;
    color: #fff;
    background-color: #bbbbbb;
}

.footer-scn {
	width: 100%;
	background-color: #f9f9f9;
	min-height: 600px;
}
JS 
// Select scroll links
var scrollLink = document.querySelectorAll('.menu li a');

// Add click event listener to scroll links
scrollLink.forEach(function(link) {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    var target = this.getAttribute('href');
    var targetPos = document.querySelector(target).offsetTop - 60;
    window.scrollTo({
      top: targetPos,
      behavior: 'smooth'
    });
  });
});

// Add scroll event listener to window
window.addEventListener('scroll', function() {
  var scrollbarLocation = window.pageYOffset;
  scrollLink.forEach(function(link) {
    var section = document.querySelector(link.getAttribute('href'));
    var sectionOffset = section.offsetTop - 100;
    
    if (sectionOffset <= scrollbarLocation) {
      // Add 'active' class to the current link's parent element
      link.parentNode.classList.add('active');
      
      // Remove 'active' class from siblings
      var siblings = link.parentNode.parentNode.children;
      for (var i = 0; i < siblings.length; i++) {
        if (siblings[i] !== link.parentNode) {
          siblings[i].classList.remove('active');
        }
      }
    } else {
      // If the section is above the current scroll position, remove 'active' class
      link.parentNode.classList.remove('active');
    }
  });
});

Related Snippets

Leave a comment

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