Div stop on top of another div

Asked

Viewed 191 times

1

I’m in trouble, I’d like a div with "position: fixed;" when you get to the footer one div on top of the other and not one on the other.

For example, the header of this site: http://themes.themelog.net/tuneup-html/. If you turn the site upside down you’ll see what I really want.

html css div

  • "div on top of each other and not on each other" I don’t understand, maybe what you’re looking for and css z-index:

  • No, as in the example above, the menu goes down as I go down the page but in a moment it goes down the header... that’s what I want, just q in the footer.

  • But basically the menu never reaches the footer. It’s only below because it comes later in html. I don’t think there’s any need to do anything about it.

1 answer

2


Well, according to the information quoted I don’t know if you refer to the menu, but if it is, it will never override the FOOTER then there won’t be a 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 really override the 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(), Scrolltop, Scroll

Browser other questions tagged html css div

You are not signed in. Login or sign up in order to post.