0

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/

segue esse codigo html, css uma pagina em OnePage com 3 paginas dentro, uma navbar lateral para navegar entrar as telas 1 2 e 3, tem um ponto vermelho do lado do link da navegação, quero que ele ande até o link da tela que ele "navegou"

basicamente quero que o ponto vermelho indique em que tela o usuario está atualmente, ou em que ponto do "body" a tela esta focando.

como faz isso? qual nome pra esse efeito ?

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

1 Resposta 1

1

Cara primeiro ponto que vai facilitar muito sua vida e converter esse quadrado vermelho em um pseudo-elemento do próprio link. Assim ele fica meio que acoplado ao link e isso facilita o alinhamento e posicionamento. Tipo a.ativo::after { css }

Esse pseudo-elemento só vai aparecer se o link tiver a classe .ativo, para isso vc tem que fazer um eventListner que coloca a classe ativo no link caso ele seja clicado. Como é mais de um link vc tem que fazer dois forEach(), um para pegar o click, e outro para tirar a classe do link que estiver ativo e colocar apenas no que foi clicado. Veja o código abaixo que vc vai entender melhor.

Segue o código da imagem acima

inserir a descrição da imagem aqui

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>

7
  • Ixi maria! Óia o cara tá aprendendo JS :P :D
    – Sam
    Commented 29/08/2019 às 18:15
  • 1
    @Sam aqui o bagulho é loko! Te falei que eu ia aprender rss, mais ainda sou só um "jovem aprendiz". Valeu a força 💪
    – hugocsl
    Commented 29/08/2019 às 18:16
  • 1
    top, parabéns pela solução
    – user148170
    Commented 29/08/2019 às 18:23
  • bem legal, aprendi uma parada nova rs, mas ainda sim se o usuário rolar a pagina o ponto não vai passar para o próximo link. eu pensei em algo como, pegar o tamanho do documento e mover o ponto com um porcentagem igual a rolagem que o usuário fizer. possível ? Commented 29/08/2019 às 18:24
  • 1
    vlw hugo! ajudo bastante Commented 29/08/2019 às 18:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .