Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Bruno Henrique da Costa

[Resolvido] Div Flutuante

Por , em Javascript

Recommended Posts

Bruno Henrique da Costa    14

Bruno Henrique da Costa
Postado

Galera to com uma certa dificuldade em uma situação

 

Nesse link: http://www.cemara.com.br/novosite/loteamento/sp/nova-odessa/jardim-altos-do-klavin/jardim-altos-do-klavin.html

 

Tipo gostaria de saber como fazer isso:

 

Quando chegar até a div de Outros Loteamentos gostaria q essa div passasse de relative para absolute, quando voltar pra cima novamente fazer afunção inversa.

 

Tipo, pegar a posição atual do Scrool, se for Maior que a posição atual da div, ela se transforma em Absolute se nao for, fica relative...

 

Entenderam?

 

Obrigado desde já!

Compartilhar este post

Link para o post
Compartilhar em outros sites

dinhografo    0

dinhografo
Postado

Usando jQuery fica mais fácil

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>divFlutuante</title>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
	 var offset = $("#flutua").offset();
	 //Altura que a div vai ficar em relação ao topo do navegador
	 var topPadding = 15;
	 $(window).scroll(function() {
		 if ($(window).scrollTop() > offset.top) {
			 $("#flutua").stop().animate({
				 marginTop: $(window).scrollTop() - offset.top + topPadding
			 });
		 } else {
			 $("#flutua").stop().animate({
				 marginTop: 0
			 });
		 };
	 });
 });
});
</script>
<style>
#flutua{
width:200px; border:dashed 1px #000000;/*só para estilizar mesmo*/
position:absolute;/*a div vai ser sempre absoluta*/
top:200px;/*posição inicial em relação ao topo e posição final se a página voltar para o topo*/
right: 20px;/*define a distância que a div vai ficar da lateral direita( 0 pra ficar colada)*/
}
</style>
</head>
<body>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<div id="flutua">
 <p>Conteúdo da divConteúdo da divConteúdo da divConteúdo da div</p>
</div>
</body>
</html>

Acredito que isto vai resolver seu problema, só adicionei um montão de parágrafos para simular algum conteúdo.

Referência:

http://www.escolacriatividade.com/como-criar-caixa-flutuante-redes-sociais-para-site/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito