Ir ao conteúdo
  • Cadastre-se

JQuery Rolar div ate um ponto e parar


Ir à solução Resolvido por bigbossbr,

Posts recomendados

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');
    }
});
});

 

Link para o post
Compartilhar em outros sites

@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>

 

Link para o post
Compartilhar em outros sites

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.

Link para o post
Compartilhar em outros sites

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

Link para o post
Compartilhar em outros sites
  • Solução

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');
    }
});

 

Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Redes-Wi-Fi-capa-3d-newsletter.png

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!