CSS
.containerMenu{
background-color: #EBEAEB;
}
.iconePreenchido{
opacity: 0;
transition: all .5s;
padding: 0px 2px;
border-radius: 50%;
margin: 16px 18px;
}
.containerIcone.ativo .iconePreenchido{
background-color: #EBEAEB;
opacity: 1;
padding: 12px 16px;
margin: 0px 2px;
transition: all .3s .1s;
}
.containerIcone{
transition: all .3s .2s;
position: relative;
}
.containerIcone.ativo{
transform: translateY(-32px);
transition: all .3s
}
.tituloIcone{
opacity: 0;
transition: all .3s;
}
.containerIcone.ativo .tituloIcone{
opacity: 1;
transition: all .3s .4s;
}
@media (max-width: 767px){
.containerIcone.ativo{
transform: translateY(-20px);
}
}
JavaScript
<script>
const containersIcone = document.querySelectorAll(".containerIcone");
const secoes = document.querySelectorAll(".secao");
let observar = new IntersectionObserver(aparecerSecao, {threshold: .3});
function aparecerSecao(listaSecoes, observar){
listaSecoes.forEach(secao => {
if(secao.isIntersecting){
containersIcone.forEach(containerIcone => containerIcone.classList.remove("ativo"));
let iconeAtivo = document.querySelector(`a[href="#${secao.target.id}"]`);
iconeAtivo.classList.add("ativo")
}
});
}
secoes.forEach(secao => {
observar.observe(secao);
})
</script>
