Ir para conteúdo

POWERED BY:

Arquivado

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

eronventer

Trabalhando com o evento .scroll()

Por , em Javascript

Recommended Posts

eronventer    2

eronventer
Postado

Olá!

Tenho um objeto fixo no final de minha página, porém o problema é, quando o rodapé da página aparecer ao rolar a página, esse objeto precisa assumir uma nova posição, ficando fixado nesse rodapé.

O que acontece, quando a posição do meu objeto for maior que meu conteúdo-rodapé o objeto assume uma posição, só que de acordo como rolar a página o objeto fica fixado nessa posição, sendo que ele deveria ficar fixado no rodapé conforme rolar a página.

Queria um help para elaborar esse script.

function chatPosition() {
	jQuery(window).scroll(function(){
		var wrap = jQuery('#wrap').height();
		var footer = jQuery('#rodape').height();
		var footer_offset = jQuery('#rodape').offset().top;
		var position = jQuery('.chat').offset().top + 83;	

		if (position > (wrap - footer)){
			jQuery('.chat').stop().animate({
				'position' : 'absolute',
				'bottom' : '225px'
			});
		} else {
			jQuery('.chat').stop().animate({
				'position' : 'fixed',
				'bottom' : '0'
			});
		}
	});
}

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mystic    4

Mystic
Postado

Apenas um "removeClass" e "addClass" é o suficiente, deixe a classe "chat" fora disso, ela deve ser apenas a classe usada para definir o estilo, use outra classe para manipular o comportamento.

<div class="chat fixed">
<!-- Estado fixo -->
</div>

Porque usar "jQuery('.chat').offset().top", se ".chat" a princípio é fixo, o nome já diz, a posição nunca vai mudar.

 

$(window).scroll(function()
{
 var position = $(this).scrollTop();

 if( position >= $('#rodape').offset().top )
 {
  $('.chat').removeClass('fixed');
  $('.chat').addClass('relative');
 };
});

<div class="chat relative">
<!-- Estado relativo ao rodapé -->
</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

eronventer    2

eronventer
Postado

Não compreendi, mas segue o html base com a mesma função para ver o que pretendo e o que está dando de errado.

 

<html>
	<head>
		<title></title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script>
			function chatPosition() {
				jQuery(window).scroll(function(){
					var wrap = jQuery('.site').height();
					var footer = jQuery('.footer').height();
					var footer_offset = jQuery('.footer').offset().top;
					var position = jQuery('.chat').offset().top + 83;

					if (position > (wrap - footer)){
						jQuery('.chat').stop().animate({
							'position' : 'absolute',
							'bottom' : '225px'
						});
					} else {
						jQuery('.chat').stop().animate({
							'position' : 'fixed',
							'bottom' : '0'
						});
					}
				});
			}

			jQuery(document).ready(function(e){
				chatPosition();
			})
		</script>
		<style type="text/css">
			body {
				background: #FFF;
				margin: 0;
				font-family: Arial;
				font-size: 12px;
				color: #000;
			}

			.site {
				width: 100%;
			}

			.header {
				height: 250px;
				background: #D4FFD5;
			}

			.content {
				height: 650px;
				background: #FAF6DC;
			}

			.footer {
				height: 225px;
				background: #CCC;
			}

			.chat {
				background: #191933;
				color: #FFF;
				border: #FFF 1px solid;
			    bottom: 0;
			    height: 83px;
			    position: fixed;
			    right: 0;
			    width: 210px;
			}
		</style>
	</head>
	<body>
		<div class="site">
			<div class="header">Header</div>
			<div class="content">Content</div>
			<div class="chat">Chat</div>
			<div class="footer">Footer</div>
		</div>
	</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mystic    4

Mystic
Postado

Não compreendi, mas segue o html base com a mesma função para ver o que pretendo e o que está dando de errado.

 

Na verdade você não explicou claramente antes, neste caso, eu pediria que você explicasse o que pretende.

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