1

Estou com um problema, gostaria que um div com "position: fixed;" quando chegar no footer ficar uma div em cima da outra e não uma sobre a outra.

Por exemplo, o header desse site: http://themes.themelog.net/tuneup-html/. Se você virar o site de cabeça para baixo irá ver o que eu realmente quero.

3
  • "div em cima da outra e não uma sobre a outra" não entendi, talvez o que você esteja procurando e o css z-index: Commented 30/01/2015 às 14:52
  • Não, como no exemplo a cima, o menu desce conforme eu desço a página porém em um momento ele fica em baixo do header... é isso que quero, só q no footer.
    – Leonardo
    Commented 30/01/2015 às 14:54
  • Mas basicamente o menu nunca chega a atingir o footer. Ele só está abaixo por que ele vem depois no html. Acho que não é necessário fazer algo em relação a isso.
    – user20038
    Commented 30/01/2015 às 15:06

1 Resposta 1

2

Bem, segundo as informações citadas não sei se você se refere ao menu, mas se for ele nunca irá sobrepor o FOOTER então não haverá a necessidade de fazer algo em relação a isso.

Exemplificando:

$(window).scroll(function() {
   if($(window).scrollTop() > 60) { // Pega scroll atual da página e compara para ver se é maior que o valor citado
       $('nav').addClass('fixed'); // Adiciona classe caso seja
   }else{
       $('nav').removeClass('fixed'); // Remove caso contrário
   }
});
* {
  margin: 0;
  padding: 0;
}

header div{
  text-align: center;
  padding: 20px;
  background-color: yellow;
}

nav {
  position: absolute;
  width: 100%;
  background: #000;
}

nav ul {
  text-align: center;
  list-style: none;
}

nav ul li {
  padding: 5px;
  display: inline-block;
}

section,
footer {
  text-align: center;
}

footer {
  color: #FFF;
  background-color: #000;
}

a {
  color: #FFF;
  text-decoration: none;
}

.fixed {
  position: relative;
  top: 0;
  position: fixed;
}
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<header>
  <div>
    Lorem ipsum dolor sit amet.  
  </div>
  <nav>
    <ul>
      <li><a href="#">Lorem</a></li>
      <li><a href="#">Lorem</a></li>
      <li><a href="#">Lorem</a></li>
      <li><a href="#">Lorem</a></li>
    </ul>
  </nav>
</header>

<section>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti officiis fugit dolore voluptate ad numquam qui non rerum, quasi ut sit officia eaque, itaque autem adipisci repudiandae consectetur, dolorum libero!</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia recusandae obcaecati molestias sint beatae commodi error magni inventore saepe, alias suscipit, ducimus aut consequatur quae sit iste blanditiis possimus delectus!</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia recusandae obcaecati molestias sint beatae commodi error magni inventore saepe, alias suscipit, ducimus aut consequatur quae sit iste blanditiis possimus delectus!</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia recusandae obcaecati molestias sint beatae commodi error magni inventore saepe, alias suscipit, ducimus aut consequatur quae sit iste blanditiis possimus delectus!</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia recusandae obcaecati molestias sint beatae commodi error magni inventore saepe, alias suscipit, ducimus aut consequatur quae sit iste blanditiis possimus delectus!</p>
    
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia recusandae obcaecati molestias sint beatae commodi error magni inventore saepe, alias suscipit, ducimus aut consequatur quae sit iste blanditiis possimus delectus!</p>
    
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia recusandae obcaecati molestias sint beatae commodi error magni inventore saepe, alias suscipit, ducimus aut consequatur quae sit iste blanditiis possimus delectus!</p>
    
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia recusandae obcaecati molestias sint beatae commodi error magni inventore saepe, alias suscipit, ducimus aut consequatur quae sit iste blanditiis possimus delectus!</p>
    
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia recusandae obcaecati molestias sint beatae commodi error magni inventore saepe, alias suscipit, ducimus aut consequatur quae sit iste blanditiis possimus delectus!</p>
    
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia recusandae obcaecati molestias sint beatae commodi error magni inventore saepe, alias suscipit, ducimus aut consequatur quae sit iste blanditiis possimus delectus!</p>
    
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia recusandae obcaecati molestias sint beatae commodi error magni inventore saepe, alias suscipit, ducimus aut consequatur quae sit iste blanditiis possimus delectus!</p>
    
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia recusandae obcaecati molestias sint beatae commodi error magni inventore saepe, alias suscipit, ducimus aut consequatur quae sit iste blanditiis possimus delectus!</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia recusandae obcaecati molestias sint beatae commodi error magni inventore saepe, alias suscipit, ducimus aut consequatur quae sit iste blanditiis possimus delectus!</p>
    
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia recusandae obcaecati molestias sint beatae commodi error magni inventore saepe, alias suscipit, ducimus aut consequatur quae sit iste blanditiis possimus delectus!</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia recusandae obcaecati molestias sint beatae commodi error magni inventore saepe, alias suscipit, ducimus aut consequatur quae sit iste blanditiis possimus delectus!</p>
  
</section>

<footer>
  Copyright &copy; 2015 - Todos os direitos reservados
</footer>
</body>
</html>

Caso seja uma DIV qualquer que realmente irá sobrepor o footer você pode fazer assim:

$(window).scroll(function() {
   if($(window).scrollTop() > 60) { // Pega scroll atual da página e compara para ver se é maior que o valor determinado (altura da primeira div) que você precisa
       $('nav').addClass('fixed'); // Adiciona classe caso seja
   }else{
       $('nav').removeClass('fixed'); // Remove caso contrário
   }
});

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 25) { // Pega scroll atual da pagina + altura do (browser) janela aka viewport e verifica se é maior que a altura do documento menos o valor determinado (altura do footer)
       $('.exemplo').addClass('fixed_exemplo'); // Adiciona classe
   }else{
       $('.exemplo').removeClass('fixed_exemplo'); // Remove classe
   }
});
* {
  margin: 0;
  padding: 0;
}

header div{
  text-align: center;
  padding: 20px;
  background-color: yellow;
}

nav {
  position: absolute;
  width: 100%;
  background: #000;
}

nav ul {
  text-align: center;
  list-style: none;
}

nav ul li {
  padding: 5px;
  display: inline-block;
}

section,
footer {
  text-align: center;
}

footer {
  color: #FFF;
  background-color: #000;
}

a {
  color: #FFF;
  text-decoration: none;
}

.fixed {
  position: relative;
  top: 0;
  position: fixed;
}

.exemplo {
  position:fixed;
  bottom:0;
  left:0;
  right:0; 
  background-color:gray;    
}

.fixed_exemplo{
  position: relative !important;
}
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<header>
  <div>
    Lorem ipsum dolor sit amet.  
  </div>
  <nav>
    <ul>
      <li><a href="#">Lorem</a></li>
      <li><a href="#">Lorem</a></li>
      <li><a href="#">Lorem</a></li>
      <li><a href="#">Lorem</a></li>
    </ul>
  </nav>
</header>

<section>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti officiis fugit dolore voluptate ad numquam qui non rerum, quasi ut sit officia eaque, itaque autem adipisci repudiandae consectetur, dolorum libero!</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia recusandae obcaecati molestias sint beatae commodi error magni inventore saepe, alias suscipit, ducimus aut consequatur quae sit iste blanditiis possimus delectus!</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia recusandae obcaecati molestias sint beatae commodi error magni inventore saepe, alias suscipit, ducimus aut consequatur quae sit iste blanditiis possimus delectus!</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia recusandae obcaecati molestias sint beatae commodi error magni inventore saepe, alias suscipit, ducimus aut consequatur quae sit iste blanditiis possimus delectus!</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia recusandae obcaecati molestias sint beatae commodi error magni inventore saepe, alias suscipit, ducimus aut consequatur quae sit iste blanditiis possimus delectus!</p>
    
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia recusandae obcaecati molestias sint beatae commodi error magni inventore saepe, alias suscipit, ducimus aut consequatur quae sit iste blanditiis possimus delectus!</p>
    
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia recusandae obcaecati molestias sint beatae commodi error magni inventore saepe, alias suscipit, ducimus aut consequatur quae sit iste blanditiis possimus delectus!</p>
    
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia recusandae obcaecati molestias sint beatae commodi error magni inventore saepe, alias suscipit, ducimus aut consequatur quae sit iste blanditiis possimus delectus!</p>
    
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia recusandae obcaecati molestias sint beatae commodi error magni inventore saepe, alias suscipit, ducimus aut consequatur quae sit iste blanditiis possimus delectus!</p>
    
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia recusandae obcaecati molestias sint beatae commodi error magni inventore saepe, alias suscipit, ducimus aut consequatur quae sit iste blanditiis possimus delectus!</p>
    
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia recusandae obcaecati molestias sint beatae commodi error magni inventore saepe, alias suscipit, ducimus aut consequatur quae sit iste blanditiis possimus delectus!</p>
    
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia recusandae obcaecati molestias sint beatae commodi error magni inventore saepe, alias suscipit, ducimus aut consequatur quae sit iste blanditiis possimus delectus!</p> 
</section>

<div class="exemplo">
  DIV EXEMPLO
</div>
  
<footer>
  Copyright &copy; 2015 - Todos os direitos reservados
</footer>
</body>
</html>

Documentação: .height(), ScrollTop, Scroll

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 .