0

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>

1 Resposta 1

2

$(window).load(function() {
  function checkOffset() {
    if ($('#element').offset().top + $('#element').height() >=
      $('#footer').offset().top - 100)
      $('#element').css('position', 'absolute');
    if ($(document).scrollTop() + window.innerHeight < $('#footer').offset().top)
      $('#element').css('position', 'fixed');
  }
  $(document).scroll(function() {
    checkOffset();
  });
});
div.body {
  width: 100%;
  height: 2000px;
  background: #C0C0C0;
  position: relative;
}

div#element {
  float: left;
  position: fixed;
  left: 10px;
  bottom: 100px;
  width: 30%;
  padding: 3em;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-top: #dc0000 3px solid;
  text-align: center;
}

div#footer {
  width: 100%;
  height: 200px;
  background: #eee;
}

.head {
  windth: 100%;
  height: 100px;
}

.conteudo {
  height: 600px;
  float: left;
  width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body">
  <div class="head">
    head
  </div>
  <div class="conteudo">
    conteudo
  </div>
  <div id="element">
    div a ser fixada
  </div>
</div>

<div id="footer">
  Rodape
</div>

9
  • 3
    Leo, qual o problema em usar o snippets? 25/05/2017 às 16:48
  • 2
    Veja como uma critica construtiva :) i.stack.imgur.com/bBHdP.png Para códigos somente com js, html e css, o recomendável [1] é que se use o stack-snippets, assim caso algum dia o seu host por algum motivo venha a parar de funcionar, o código continue ativo, aqui, na rede 25/05/2017 às 16:57
  • @MarceloBoni entendi, eu tentei porém tava dando mensagem de erro
    – user60252
    25/05/2017 às 17:00
  • Que tipo de mensagem de erro? Usar é bem chatinho mesmo no começo, mas depois que se pega a pratica, da pra criar algumas coisas muito bem elaboradas 25/05/2017 às 17:01
  • 1
    yes, vivendo e aprendendo!!!
    – user60252
    25/05/2017 às 18:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .