响应式导航栏headroom.js—-插件推荐1

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

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

 

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

发表评论

邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据