I have used the following example to get an animated link underline effect on hover: https://tobiasahlin.com/blog/css-trick-animating-link-underlines/
This is working fine, however, I would like to have the underline remain while that section of the page is in view. I'm using the following JS code to add or remove the 'current' class to the appropriate nav element, and this works fine for something simple like changing the background-color:
window.onscroll = function() {
var navlinks = document.getElementsByTagName('nav')[0].getElementsByTagName('a');
var sections = document.getElementsByTagName('main')[0].getElementsByTagName('section');
for (var s = 0; s < sections.length; s++) {
var sectTop = sections[s].offsetTop - 1;
var sectBot = sections[s].offsetTop+sections[s].offsetHeight - 1;
if (window.scrollY >= sectTop && window.scrollY < sectBot) {
navlinks[s].classList.add('current');
} else {
navlinks[s].classList.remove('current');
}
}
}
I'm unsure of how to just keep the underline that is produced by the following CSS:
nav div a::before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 2px;
bottom: 2vh;
left: 0;
background-color: #02081a;
transform: scaleX(0);
transition: transform 0.3s ease;
}
nav div a:hover::before {
transform: scaleX(1);
}
I've tried a few things but it just makes a mess of it all. Any ideas on how to get the underline to stay when the appropriate section is being targeted?
All sorted with a simple change from:
nav div a:hover::before to nav div a:hover::before, nav div a.current::before
As suggested by @CBroe, thanks all
Basically, all you need to do is add to the CSS rule that shows the line a classname that you assign when page is scrolled.
window.onscroll = function() {
var navlinks = document.getElementsByTagName('nav')[0].getElementsByTagName('a');
var sections = document.getElementsByTagName('main')[0].getElementsByTagName('section');
for (var s = 0; s < sections.length; s++) {
var sectTop = sections[s].offsetTop - 1;
var sectBot = sections[s].offsetTop+sections[s].offsetHeight - 1;
if (window.scrollY >= sectTop && window.scrollY < sectBot) {
navlinks[s].classList.add('current');
} else {
navlinks[s].classList.remove('current');
}
}
}
window.onscroll();nav div a {
position: relative;
text-decoration: none;
font-size: 24px;
display: inline-block;
}
nav div a.current::before,
nav div a:hover::before,
nav div a::before
{
transform: scaleX(1);
}
nav div a::before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: red;
transition: transform 0.3s ease;
transform: scaleX(0);
}
nav div a:hover:not(.current)::before
{
background-color: green;
}
main
{
position: relative;
top: 5vh;
overflow: auto;
}
nav
{
position: fixed;
top: 0;
z-index: 1;
background-color: white;
width: 100%;
}
section
{
height: 150vh;
border: 1px solid black;
}<nav>
<div>
<a href="#section1">section 1</a>
<a href="#section2">section 2</a>
<a href="#section3">section 3</a>
</div>
</nav>
<main>
<section id="section1"><h1>my section 1</h1></section>
<section id="section2"><h1>my section 2</h1></section>
<section id="section3"><h1>my section 3</h1></section>
</main>