一、响应式导航栏，鼠标向上显示，向下隐藏

Headroom.js 是一个轻量级、高性能的JS小工具（不依赖任何工具库！），它能在页面滚动时做出响应。当页面向下滚动时，导航条消失，当页面向上滚动时，导航条就出现了。这样可以在页面中节省空间，呈现更多内容。官网headroom.js

官网提供三种方式使用，我这里使用js调用：

1、在头部调用js库

<script src="libs/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="libs/headroom.min.js" type="text/javascript" charset="utf-8"></script>
<script src="libs/jQuery.headroom.js" type="text/javascript" charset="utf-8"></script>

2、写向上滚动向下滚动的css样式

<style>
/*默认动画样式*/
			.headroom {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				transition: all .5s ease-in-out;
			}
			/*鼠标下滑动画样式*/
			.headroom--unpinned {
				top: -250px;
			}
			/*鼠标上滑动画样式*/
			.headroom--pinned {
				top: 0;
			}
</style>

3、初始化js库

<script>
//#header-nav为导航栏的id
$("#header-nav").headroom();
</script>

注意事项：

1. 调用库的时候需要注意先后顺序；
2. js初始化要么放在head里面，需要放在$(document).ready(function(){$(“#header-nav”).headroom();})，或者放在body最下面写，以防止页面还没有加载，获取不到id

二、不用插件，响应式底部提示信息，鼠标向上隐藏，向下显示

我自己后来也可以不用插件写了底部的提示信息，鼠标向上滑动时，底部信息隐藏或者放在页面最下面，鼠标向下滑动时，底部信息固定在底部。

思想：监测鼠标运动方向，是向上还是向下运动，然后执行相应的功能

代码：

css样式：

<style>
.footer-dialog {
	position: relative;/*初始化定位，放在页面最后面*/
	bottom: 0;
	left: 0;
	text-align: center;
	color: #525252;
	font-size: 17px;
	height: 72px;
	width: 100%;
	background-color: #F2F2F2;
}

.footer-dialog button {
	width: 126px;
	height: 38px;
	opacity: 0.78;
	background: #0D2337;
	color: #FFFFFF;
	font-size: 14px;
	margin-top: 17px;
}
</style>

html代码：

<!--页脚开始-->
		<div id="footer-dialog" class="row footer-dialog">
			<div class="col-6 text">
				您是否希望与我们的技术顾问对话？

			</div>
			<div class="col-6">
				<button type="button">立即对话</button>
			</div>
		</div>
		<!--页脚结束-->

js代码：

<script>
			//监测鼠标滚动事件
			var scrollFunc = function(e) {
				e = e || window.event;
				if(e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件               
					if(e.wheelDelta > 0) { //当滑轮向上滚动时  
						$("#footer-dialog").css("position", "relative");
					}
					if(e.wheelDelta < 0) { //当滑轮向下滚动时  
						$("#footer-dialog").css("position", "fixed");
					}
				} else if(e.detail) { //Firefox滑轮事件  
					if(e.detail > 0) { //当滑轮向上滚动时  
						$("#footer-dialog").css("position", "relative");
					}
					if(e.detail < 0) { //当滑轮向下滚动时  
						$("#footer-dialog").css("position", "fixed");
					}
				}
			}
			//给页面绑定滑轮滚动事件  
			if(document.addEventListener) { //firefox  
				document.addEventListener('DOMMouseScroll', scrollFunc, false);
			}
			//滚动滑轮触发scrollFunc方法  //ie 谷歌  
			window.onmousewheel = document.onmousewheel = scrollFunc;
			
		</script>

当一个页面很长时，两者可以放在一个页面里面，提升用户使用的方便。

当你看完发现还不会时，或者折腾半天还是没有效果时，那就下载我的例题源码吧😄😄😄链接：导航栏 密码：vegp

 

欢迎转载，转载需带着文章出处链接~~