我正在尝试做一个在滚动时消失的导航栏，带有漂亮的动画。这是我到目前为止所做的。
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;
}
最佳答案
如果你想用一些动画在滚动时隐藏导航栏，那么固定它的位置并在滚动时隐藏它。 (此demo需要添加Jquery)
喜欢， 示例 HTML
<header>Header</header>
示例 CSS
body {
margin: 0;
padding: 0;
height: 1000px
}
header {
position:fixed;
background: #111111;
margin: 0px;
padding: 0px;
width: 100%;
height:50px;
color:#FFFFFF;
-webkit-transition: all 0.35s;
-moz-transition: all 0.35s;
transition: all 0.35s;
overflow: hidden
}
header.hide {
margin-top: -50px;
}
示例 Jquery
$(window).scroll(function() {
if ($("header").offset().top > 50) {
$("header").addClass("hide");
}
else {
$("header").removeClass("hide");
}
});
关于javascript - 如何制作滚动时消失的导航栏(带有漂亮的动画)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38334224/