So, I want to make a Navigation bar animation.On my website my navigation bar has 80px height and it is in position:relative. I want to make a slide down animation after I scroll down more than 80pixels,and after this I want to set the navbar to position:fixed.
Here is a short code for better understanding of what I did to this:
$(document).ready(function(){
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll > 80) {
$(".black").css("position" , "fixed");
$(".black").css("transition", "position 6s ease");
}
else{
$(".black").css("position" , "absolute");
}
})
})body{
margin:0;
padding:0;
height:1000px;
}
.black{
position:relative;
top:0;
background:#333;
width:100%;
height:50px;
}
.black ul{
list-style-type:none;
padding:0;
text-align:center;
}
.black ul li{
display:inline-block;
width:100px;
color:white;
}
.blue{
position:fixed;
top:0;
background:blue;
width:100%;
height:50px;
}<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<div class="black">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
</body>
</html>As you can see, when I scroll down more than 80px,the navbar appears very fast, with zero animation and delay.I tried to add animation duration,and a bit delay, but for some reason it hasn't worked. So I want to make a slide down navbar animation after I scroll down more than 80px and change the position to fixed,so after scroll down,the navbar will always be at the top of the screen.
Now, here is a good example of how I want to make the animation(Copied from w3schools):
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-50px";
}
}body {
margin: 0;
background-color: #f1f1f1;
font-family: Arial, Helvetica, sans-serif;
}
#navbar {
background-color: #333;
position: fixed;
top: -50px;
width: 100%;
display: block;
transition: top 0.4s;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
<div style="padding:15px 15px 2500px;font-size:30px">
<p><b>This example demonstrates how to slide down a navbar when the user starts to scroll the page.</b></p>
</div>
</body>
</html>A big thank you to anyone who can help me in this,because I don't have too much idea on how I should do this animation.Sorry for the bad english,I hope you understand everything well.