<div class="main">
<nav>
<ul class="menu">
<li><a>HOME</a></li>
<li><a>ABOUT</a></li>
<li><a>WORK</a></li>
<li><a>CONTACT</a></li>
</ul>
</nav>
<p>SCROLL DOWN!</p>
</div>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Lato";
color: #4a4a4a;
}
.main {
width: 40em;
height: 300vh;
margin: 0 auto;
background: silver;
}
.main p {
font-size: 30px;
text-align: center;
padding-top: 150px;
}
.menu {
position: fixed;
text-align: center;
}
.menu li {
background-color: #32557f;
color: #fff;
list-style-type: none;
display: inline-block;
padding: 15px 0;
margin-right: -4px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff;
}
.menu li:last-child {
border-right: 1px solid #fff;
}
.menu a {
display: block;
width: 10em;
}
.menu-scroll li {
padding: 5px 0;
}
nav,
a,
li {
transition: 0.7s all;
}
$(window).scroll(function() {
if ($(document).scrollTop() > 200) {
$('.menu').addClass('menu-scroll');
} else {
$('.menu').removeClass('menu-scroll');
}
});
External CSS
This Pen doesn't use any external CSS resources.