首先是导入bootstrap等样式,和jquery,再复制一个nav组件;代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>多凡Blog</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="vendor/css/bootstrap.css">
<!-- Custom css -->
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css"> </head>
<body>
<!-- Navigation -->
<nav class=" navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<a class="navbar-brand" href="#" >DuoFan</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
Menu
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link " href="post.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link " href="contact.html">Contact</a>
</li>
<form class="form-inline my-0 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</ul>
</div>
</nav>
<header class="masthead" style="background-image: url(img/home-bg.jpg); height: 1200px;">
</header>
<!-- Jquery 3.3.1 -->
<script src="vendor/js/jquery-3.3.1.js"></script>
<!-- Bootstrap core JS -->
<!-- <script src="vendor/js/bootstrap.js"></script> -->
<script src="vendor/js/bootstrap.bundle.js"></script>
<script src="js/index.js" type="text/javascript" ></script>
</body>
</html>
接下来控制nav可以下滑消失,上滑出现, 思路是,将nav首先固定到浏览器顶部,然后使用js监听滚轮滚动事件, 设置nav显示到浏览器顶部。 js代码如下:
(function ($) {
// Show the navbar when the page is scrolled up
var MQL = 992;
//primary navigation slide-in effect
if ($(window).width() > MQL) {
var headerHeight = $('#mainNav').height();
$(window).on('scroll', {
previousTop: 0
},
function () {
var currentTop = $(window).scrollTop();
//check if user is scrolling up
if (currentTop < this.previousTop) {
//if scrolling up...
if (currentTop > 0 && $('#mainNav').hasClass('is-fixed')) {
$('#mainNav').addClass('is-visible');
}
// when scrolling to top
else {
$('#mainNav').removeClass('is-visible is-fixed');
}
} else if (currentTop > this.previousTop) {
//if scrolling down...
$('#mainNav').removeClass('is-visible');
if (currentTop > headerHeight && !$('#mainNav').hasClass('is-fixed')) $('#mainNav').addClass('is-fixed');
}
this.previousTop = currentTop;
});
}
})(jQuery); // End of use strict
css 样式如下:
/* Navigation Start*/
#mainNav {
position: absolute;
border-bottom: 1px solid #e9ecef;
background-color: white;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#mainNav .navbar-brand {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 800;
color: #343a40;
}
#mainNav .navbar-toggler {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 800;
padding: 13px;
text-transform: uppercase;
color: #343a40;
}
#mainNav .navbar-nav>li.nav-item>a {
font-size: 12px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
@media only screen and (min-width: 992px) {
#mainNav {
border-bottom: 1px solid transparent;
background: transparent;
}
#mainNav .navbar-brand {
padding: 10px 20px;
color: #fff;
}
#mainNav .navbar-brand:focus,
#mainNav .navbar-brand:hover {
color: rgba(255, 255, 255, 0.8);
}
#mainNav .navbar-nav>li.nav-item>a {
padding: 10px 20px;
color: #fff;
}
#mainNav .navbar-nav>li.nav-item>a:focus,
#mainNav .navbar-nav>li.nav-item>a:hover {
color: rgba(255, 255, 255, 0.8);
}
}
@media only screen and (max-width: 992px) {
#mainNav {
transition: background-color 0.5s;
}
}
@media only screen and (min-width: 992px) {
#mainNav {
transition: background-color 0.5s;
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
}
#mainNav.is-fixed {
position: fixed;
top: -67px;
transition: transform 0.2s;
border-bottom: 2px solid white;
background-color: rgba(255, 255, 255, 0.9);
}
#mainNav.is-fixed .navbar-brand {
color: #212529;
}
#mainNav.is-fixed .navbar-brand:focus,
#mainNav.is-fixed .navbar-brand:hover {
color: #0085A1;
}
#mainNav.is-fixed .navbar-nav>li.nav-item>a {
color: #212529;
}
#mainNav.is-fixed .navbar-nav>li.nav-item>a:focus,
#mainNav.is-fixed .navbar-nav>li.nav-item>a:hover {
color: #0085A1;
}
/* 当js事件触发时,给nav增加 is-visible样式,效果是显示出nav
其效果就相当于:
postion: fixed;
top:0;
但是transform 这里使用的是GPU渲染会看起来更加流畅。
*/
#mainNav.is-visible {
transform: translate3d(0, 100%,0);
}
}
/* Navigation End*/
好了以上就是本次功能实现的全部代码了。