Fixar div até atingir uma certa altura

DeepSeek, a ferramenta de IA, vai tirar suas dúvidas e é gratuita ainda:

https://chat.deepseek.com/

>

1 hora atrás, Williams Duarte disse:

DeepSeek, a ferramenta de IA, vai tirar suas dúvidas e é gratuita ainda:

https://chat.deepseek.com/

Opa. Vaeu, mas não consegui.

Consegue me ajudar com o código ou me passar um link de artigo ou vídeo?

Abs

Você pode ajustar o comportamento da div para que ela pare de ser fixa ao se aproximar do rodapé, calculando a distância entre a div e o rodapé durante o scroll. Aqui está uma solução que faz isso:

<script>
 $(function(){
 var jElement = $('.fixar_banner');
 var footer = $('footer'); // Substitua 'footer' pelo seletor do seu rodapé
 var offsetTop = jElement.offset().top;
 var footerOffset = footer.offset().top;
 var elementHeight = jElement.outerHeight();

 $(window).scroll(function(){
 var scrollTop = $(this).scrollTop();
 var distanceToFooter = footerOffset - (scrollTop + elementHeight + 20); // 20 é um espaçamento extra

 if (scrollTop > offsetTop && distanceToFooter > 0) {
 jElement.css({
 'position': 'fixed',
 'top': '10px'
 });
 } else if (scrollTop > offsetTop && distanceToFooter <= 0) {
 jElement.css({
 'position': 'absolute',
 'top': footerOffset - elementHeight
 });
 } else {
 jElement.css({
 'position': 'relative',
 'top': 'auto'
 });
 }
 });
 });
</script>

	Explicação:

	 

	Cálculo das Posições:

	- offsetTop: É a distância inicial da div em relação ao topo da página.

	- footerOffset: É a distância do rodapé em relação ao topo da página.

	- elementHeight: É a altura da div que você quer fixar.

	Lógica do Scroll:

	1. Quando o scroll é maior que a posição inicial da div (offsetTop) e ainda há espaço antes do rodapé (distanceToFooter > 0):

	   - A div é fixada na posição desejada (por exemplo, top: 10px).

	2. Quando a div está próxima do rodapé (distanceToFooter <= 0):

	   - A div é posicionada de forma absoluta, alinhando-se ao topo do rodapé.

	3. Caso contrário:

	   - A div retorna à posição relativa original.

	Ajustes:

	- Certifique-se de substituir 'footer' pelo seletor correto do seu rodapé.

	- O valor 20 é um espaçamento extra para evitar que a div encoste no rodapé. Ajuste conforme necessário.