JQuery Rolar div ate um ponto e parar

bigbossbr · 14 de janeiro de 2021

Estou tentando fazer algo que deveria ser simples mais não estou conseguindo. Quero pegar um div que tem um formulário e fazer ela rolar com a pagina até um certo ponto da pagina, digamos o meio dela, parar ali mesmo que o usuário desça mais a pagina o formulário vai ficar ali parado, e só vai se movimentar novamente, no caso para cima se ele subir acima digamos do meio da tela, ou de um elemento que eu defini com ponto de parada, que no caso é minha o final da minha <section class="diferenciais"></section> (parar quando chegar aqui) .

O meu código em vez de parar a div esta fazendo ela sumir e voltar quando volta ao ponto que parou.

Alguma dica de como corrigir isto?

Obrigado

$(function () {
$(window).scroll(function () {
    if ($(this).scrollTop() > $('.diferenciais').offset().top) {
        $('.span-form').removeClass('fixed-nav');
        $('.span-form').addClass('static-nav');
    } else {
        $('.span-form').removeClass('static-nav');
        $('.span-form').addClass('fixed-nav');
    }
});
});

GabrielSennaMs · 14 de janeiro de 2021

@bigbossbr Bom amigo teria como informa com mais detalhes o que você desseja fazer, e se possivel passar o html e css.

O código está funcionado sem prolema, eu fiz o teste aqui.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
  $(window).scroll(function () {
      if ($(this).scrollTop() > $('#barra').offset().top) {
          $('#teste').removeClass('fixed-nav');
          $('#teste').addClass('static-nav');
      } else {
          $('#teste').removeClass('static-nav');
          $('#teste').addClass('fixed-nav');
      }
  });
})
</script>
<style>
.fixed-nav {
	position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 5px;
    background-color: #cae8ca;
    border: 2px solid #4CAF50;
}

.static-nav {
	position: static;
}

</style>
</head>
<body>

<h2>Página de teste</h2>
<p id="teste" class="fixed-nav">Carro</p>
<div style="height: 1000px;"></div>
<p id="barra">Parede</p>
<div style="height: 1000px;"></div>
<p>Fim da página de teste</p>

</body>
</html>

bigbossbr · 14 de janeiro de 2021

Olá @GabrielSennaMs,

Primeiro obrigado pela resposta.

O que ocorrer que que quando o elemento .span-form citado no código atinge o final da <section class="diferenciais">, ele some, em vez de somente parar e ficar ali até a pagina rolar para cima.

Minha ideia é ele não subir e sim parar, quando o usuário voltar página acima do final da <section class="diferenciais">, a ele volta a subir junto a tela até o topo.

GabrielSennaMs · 14 de janeiro de 2021

@bigbossbr Teria como você mostra as classes do css "fixed-nav" e "static-nav"?

bigbossbr · 14 de janeiro de 2021

2 minutos atrás, GabrielSennaMs disse:

@bigbossbr Teria como você mostra as classes do css "fixed-nav" e "static-nav"?

.fixed-nav{
    position: fixed;
    z-index: 999;
}
.static-nav{
    position: static;
    z-index: 999;
}

bigbossbr · 14 de janeiro de 2021

Consegui resolver,

Se alguém precisar em algum momento algo neste sentido, fica ai o código que pode ajudar.

Adicionei a ela uma verificação para tamanho de tela, para que a classe fixed-nav seja removida em casas de resoluções abaixo de 1366.

Para funcionar, eu usei o próprio tamanho do $(this).scrollTop() para adicionar um classe top ao elemento, assim cada vez que a tela desce o top vai modificando e mantendo o formulário no mesmo lugar, quando a tela, sobe novamente e ultrapassa o elemento que marca o ponto, ele volta a subir junto com a tela.

$(function () {
    var tela = window.screen.availWidth;

    if (tela >= 1366) {
        $(window).scroll(function () {
            var form = $('.span-form').height();
            var inicioDiv = $('.intro').height();
            var finalDiv = $('.diferenciais').height() + inicioDiv;
            var agora = (inicioDiv - $(this).scrollTop()) + 175;

            if ($(this).scrollTop() > (finalDiv - form)) {
                $('.span-form').css('top', agora + 'px');
            } else {

                $('.span-form').css({
                    'top': '75px',
                });
            }
        });
    } else {
        $('.span-form').removeClass('fixed-nav');
    }
});