Div stop on top of another div

Question

Div stop on top of another div

Navigation

#1 by (2 votes)

1

I'm having a problem, I would like a div with "position: fixed;" when it gets in footer to be one div over the other and not one over the other.

For example, the header of this site: link . If you turn the site upside down you will see what I really want.

html css div

asked by anonymous 30.01.2015 / 15:33

1 answer

Update with JOIN in MySQL List based WHERE filter with SQL

score 2 · Accepted Answer

Well, according to the information quoted I do not know if you are referring to the menu, but if it is it will never overwrite the FOOTER so there will be no need to do anything about it.

Exemplifying:

$(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>

If it is a DIV any that will actually override footer you can do so:

$(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>

Documentation: .height () , # , Scroll / a>