<nav class="fix-nav">
<ul>
<li><a href="#sec1" class="smooth-scroll">Section1</a></li>
<li><a href="#sec2" class="smooth-scroll">Section2</a></li>
<li><a href="#sec3" class="smooth-scroll">Section3</a></li>
<li><a href="#sec4" class="smooth-scroll">Section4</a></li>
<li><a href="#sec5" class="smooth-scroll">Section5</a></li>
</ul>
</nav>
<section id="sec1">
<p class="text-center">Section1</p>
<div class="spacer"></div>
</section>
<section id="sec2">
<p class="text-center">Section2</p>
<div class="spacer"></div>
</section>
<section id="sec3">
<p class="text-center">Section3</p>
<div class="spacer"></div>
</section>
<section id="sec4">
<p class="text-center">Section4</p>
<div class="spacer"></div>
</section>
<section id="sec5">
<p class="text-center">Section5</p>
<div class="spacer"></div>
</section>
.fix-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #333;
}
.fix-nav ul {
display: flex;
height: 50px;
}
.fix-nav li {
width: 20%;
height: 100%;
}
.smooth-scroll {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 12px;
color: #fff;
transition: background-color 0.3s;
}
.smooth-scroll.is-current {
background: #555;
}
.fix-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
background: $color_main;
& ul {
display: flex;
height: 50px;
}
& li {
width: 20%;
height: 100%;
}
}
(function() {
let animTarget = document.querySelectorAll('[id*="sec"]');
if(!animTarget) {return;}
let btns = document.querySelectorAll('.smooth-scroll');
var options = {
root: null,
rootMargin: '0px 0px -30%',
threshold: 0
}
var observer = new IntersectionObserver(animStart, options);
animTarget.forEach(el => {
observer.observe(el);
});
function animStart(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
btns.forEach(btn => {
if(btn.getAttribute('href') === `#${entry.target.id}`) {
btn.classList.add('is-current');
} else {
btn.classList.remove('is-current');
}
});
}
});
}
}());