0

Eu fiz uma página em bootstrap e também um scroll suave, mas este scroll não é da página e sim de uma div.

A scroll principal da página eu tirei, e a página em si está dentro dessa div.

Existe alguma maneira de eu deixar o scroll da div como principal? Pois assim que entram na página precisam clicar para descer a barra.

E eu também preciso mudar uma class assim que rolasse a página a partir de certo valor, mas não altera porque no meu código ele pega o scroll da body, mas eu queria que ele pegasse o scrol da div.

Segue abaixo meu código:

window.onscroll = function() {myFunction()};

var header = document.getElementById("banner");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky-top");
  } else {
    header.classList.remove("fixed-bottom");
  }
}
<div class="main">

a pagina em si esta aqui junto com scroll
</div>

4
  • Cara vc quer que o menu fique fixo ao rolar a página ?
    – hugocsl
    8/10/2019 às 21:50
  • mais porque você precisa usar o scroll da div sendo que pode personalizar o scroll do navegador? alias, o certo era você fazer este scroll na tag <body> por uma questão de hierarquia. 8/10/2019 às 22:04
  • Opa Boa noite pessoal. Então é porque eu preciso da propriedade scroll smoth e ela só funciona dessa maneira, na tag body eu ja tentei e não funcionou. O principal motivo era mais por este e por conta do smoth separa-lo por section 8/10/2019 às 22:20
  • Hugo na vdd, eu quero assim que entrar na pagina o navbar ficar embaixo e assim que rolar a pagina vim pra cima 8/10/2019 às 22:24

1 Resposta 1

1

Cara vc nem precisa de JS para fazer isso tudo. Para fixar o menu no topo depois de rodar a tela basta usar position:stiky e para fazer o scroll suave vc pode si usar o scroll padrão da janela, basta que vc declare o behavior do scroll como smooth no HTML

Veja esse imagem, nesse cótigo tem ZERO de JS, e quase nada de CSS

inserir a descrição da imagem aqui

Teste vc mesmo :D

html {
    overflow-y: scroll;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-size: 30px;
    background-image: linear-gradient(to bottom, tomato 0%, azure 100%);
}

#ancora {
    margin-top: 150vh;
    margin-bottom: 50vh;
}

.menu {
    background-color: green;
    top: 0;
    position: sticky;
}
<div style="height: 100px;">um div qq</div>
<div class="menu">
    <a href="#ancora">link menu</a>
</div>

<div id="ancora">ancora</div>

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 .