BootStrap 导航栏实现下滑消失，上滑出现

1.Html

首先是导入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>

2.JS

接下来控制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

3.CSS

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*/

BootStrap 导航栏实现下滑消失，上滑出现

1.Html

2.JS

3.CSS

4.效果图

置顶时

下滑时

上滑时