effect for navigation on Onepage

Question

body{
  background: #000;
  
  display: flex;
  flex: 1;  
  flex-direction: column;
  height: 300vh;
  justify-content: center;
  align-items: center;
}

p{
  color: white;
}

.navegacao-lateral{
  position: fixed;
  left: 0;
  bottom: 0;
  
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-around;
  height: 100vh;
  
  border-style: solid;
  border-width: 0 1px 0 0;
  border-color: #fff;
  
  padding: 0  3vw;
}

#tela1{
    display: flex;
    flex: 1;      
    height: 100vh;
    
    justify-content: center;
    align-items: center;
}
#tela2{
    display: flex;
    flex: 1;      
    height: 100vh;
    
    justify-content: center;
    align-items: center;
}
#tela3{
    display: flex;
    flex: 1;      
    height: 100vh;
    
    justify-content: center;
    align-items: center;
}

.marca{  
  position: fixed;
  top: 16%;
  left: 13%;
  width: 10px;
  height: 10px;
  background: red;
  
}

<nav class="navegacao-lateral"> 
  <a href="#tela1"> Tela 1 </a>
  <a href="#tela2"> Tela 2 </a>            
  <a href="#tela3"> Tela 3 </a>
</nav>

<div class="marca">
  
</div>

<div id="tela1" >
  <p>
    tela1
  </p>
</div>
<div id="tela2" >
  <p>
    tela2
  </p>
</div>
<div id="tela3" > 
  <p>
    tela3
  </p>
</div>

https://jsfiddle.net/nsLp2frw/4/

follows this html, css code a page on Onepage with 3 pages inside, a side navbar for navigate enter screens 1 2 and 3, have a red dot on the link side from the navigation, I want it to walk to the link of the screen that it "navigated"

basically I want the red dot to indicate which screen the user is currently on, or at which point of "body" the screen is focusing.

How do you do that? what name for that effect ?

https://jsfiddle.net/nsLp2frw/4/

Answer 1

Guy first stitch that will make your life much easier and convert that red square into one pseudo-element link itself. So it gets kind of attached to the link and it facilitates alignment and positioning. Type a.ativo::after { css }

That one pseudo-element will only appear if the link has the class .ativo, for that you have to make a eventListner who puts the class ativo in case it is clicked. As it is more than one link you have to do two forEach(), one to take the click, and another to take the class of the link that is active and put only in what was clicked. See the code below that you will understand better.

Follow the image code above

let link = document.querySelectorAll('.navegacao-lateral > a')

function classe(e) {
    link.forEach((rmk) => {
        rmk.classList.remove('ativo');
    })
    e.currentTarget.classList.add('ativo');

}

link.forEach((el) => {
    el.addEventListener('click', classe);
})

body {
    background: #000;

    display: flex;
    flex: 1;
    flex-direction: column;
    height: 300vh;
    justify-content: center;
    align-items: center;
}

p {
    color: white;
}

.navegacao-lateral {
    position: fixed;
    left: 0;
    bottom: 0;

    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-around;
    height: 100vh;

    border-style: solid;
    border-width: 0 1px 0 0;
    border-color: #fff;

    padding: 0 3vw;
}

#tela1 {
    display: flex;
    flex: 1;
    height: 100vh;

    justify-content: center;
    align-items: center;
}

#tela2 {
    display: flex;
    flex: 1;
    height: 100vh;

    justify-content: center;
    align-items: center;
}

#tela3 {
    display: flex;
    flex: 1;
    height: 100vh;

    justify-content: center;
    align-items: center;
}

a.ativo::after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 10px;
    height: 10px;
    background: red;
    margin-left: 100%;
    margin-top: -10px;
}

<nav class="navegacao-lateral">
    <a href="#tela1" class="ativo"> Tela 1 </a>
    <a href="#tela2"> Tela 2 </a>
    <a href="#tela3"> Tela 3 </a>
</nav>

<div id="tela1">
    <p>
        tela1
    </p>
</div>
<div id="tela2">
    <p>
        tela2
    </p>
</div>
<div id="tela3">
    <p>
        tela3
    </p>
</div>