<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Nav scroll animation</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav>
<h1>logo</h1>
<ul>
<li class="dropdown">
<a href="#" class="dropped">about
<i class="fa fa-chevron-down"></i>
</a>
</li>
<li>
<a href="#">services
<i class="fa fa-chevron-down"></i>
</a>
</li>
<li>
<a href="#">events
<i class="fa fa-chevron-down"></i>
</a>
</li>
<li>
<a href="#">resources
<i class="fa fa-chevron-down"></i>
</a>
</li>
<li>
<a href="#">contact</a>
</li>
</ul>
</nav>
<header>
</header>
<section>
</section>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/-J0hn-/nav-scroll-animation-pLRvpO */
h1 {
margin: 0;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
}
nav {
padding: 0 10px;
transition: .5s;
position: fixed;
box-sizing: border-box;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
nav h1 {
opacity: 0;
font-weight: 100;
color: #666;
}
nav ul {
display: flex;
justify-content: flex-end;
}
nav ul li a {
font-weight: bold;
font-size: 14px;
text-transform: uppercase;
color: white;
display: inline-block;
padding: 25px 15px;
}
nav ul li a i {
color: orange;
vertical-align: top;
margin-left: 5px;
}
nav ul li a:hover {
color: orange;
}
header {
height: 100vh;
background: linear-gradient(0deg, rgba(0, 0, 139, 0.7), rgba(0, 0, 139, 0.7)), url("https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?h=350&auto=compress&cs=tinysrgb") no-repeat center center;
background-size: cover;
}
section {
height: 100vh;
}
nav.animate {
padding: 0 50px;
border-top: 6px solid darkblue;
box-shadow: 0 4px 6px 0 #ccc;
background: white;
}
nav.animate h1 {
opacity: 1;
}
nav.animate ul li a {
color: #666;
border-top: none;
}
nav.animate ul li a:hover {
color: orange;
}
/*Downloaded from https://www.codeseek.co/-J0hn-/nav-scroll-animation-pLRvpO */
$(window).on('scroll', function() {
var scrollPos = this.pageYOffset;
var $header = $('header').innerHeight()
if(scrollPos >= $header - 60) {
$('nav').addClass('animate')
} else {
$('nav').removeClass('animate')
}
})
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Font Awesome
Normalize
jQuery
v3.3.1
