Bom pessoal eu tenho uma div que fica fixa ao rolar a página, mas quero que ela volte a rolar junto com a página antes de chegar ao rodape. O código abaixo faz com que ao chegar à 300 de altura do scroll a div fica fixa. O problema é que quando rolo a página ate o radapé a div sobrepõe o rodapé, pois ela esta como fixa então quero que a div volte a rolar com a página antes de chega ao rodapé por exemplo 300px do bottom.
Meu código esta assim:
$(function(){
var jElement = $('.element');
$(window).scroll(function(){
if ( $(this).scrollTop() > 300 ){
jElement.css({
'position':'fixed',
'top':'200px'
});
}
else{
jElement.css({
'position':'relative',
'top':'auto'
});
}
});
});
.head {windth:100%; height:100px;}
.conteudo{
height:600px;float:left;width:50%;
}
.element{float:left;
width: 30%;
padding: 3em;
background: #f9f9f9;
border: 1px solid #ddd;
border-top: #dc0000 3px solid;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="head">
head
</div>
<div class="conteudo">
conteudo
</div>
<div class="element">
div a ser fixada
</div>