$(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 © 2015 - Todos os direitos reservados
</footer>
</body>
</html>
"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:
– Icaro Martins
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.
– Leonardo
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.
– user20038