Publicado em 18 de set.

Trabalhando com o evento .scroll()

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

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Mystic· 19 de set.

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

</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">

</div>

eronventer· 19 de set.

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>

Mystic· 19 de set.

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.