How can I create a navigation bar that disappears when scrolling, with a smooth animation? This is the progress I have made so far.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="icon" href="favicon.PNG" type="image/gif">
<title>Top News</title>
</head>
<body>
<div class = "fixedbc">
<div class="bwbutton">Welcome to Top News</div>
<header>asdasd</header>
</div>
</body>
</html>
CSS:
/* =================== Needs =================== */
html, body {
width: 100%;
height: 100%;
background: white;
margin:0;
padding:0;
border:0px;
}
/* =================== Buttons =================== */
.bwbutton {
background-color:transparent;
border:6px solid #ffffff;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Georgia;
font-size:45px;
padding:13px 60px;
text-decoration:none;
position:absolute;
top:30%;
left:29%;
transition: all .1s ease-in;
}
.bwbutton:hover {
background-color:transparent;
border:6px solid black;
color:black;
transition: all 0.2s ease-in;
}
.bwbutton:active {
}
/* =================== LAYOUT =================== */
.fixedbc {
min-height:100%;
background-image: url("../bc.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
marquee{
text-decoration: none;
margin-top:1.5%;
color:white;
}
/* =================== Header // Nav =================== */
header {
background: #f5b335;
height: 40px;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
}
// we'll add this class using javascript
.nav-up {
top: -40px; // same as header height. use variables in LESS/SASS
}
Javascript:
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}
function hasScrolled() {
var st = $(this).scrollTop();
if(Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop && st > navbarHeight){
$('header').removeClass('nav-down').addClass('nav-up');
} else {
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}