一、响应式导航栏，鼠标向上显示，向下隐藏
Headroom.js 是一个轻量级、高性能的JS小工具（不依赖任何工具库！），它能在页面滚动时做出响应。当页面向下滚动时，导航条消失，当页面向上滚动时，导航条就出现了。这样可以在页面中节省空间，呈现更多内容。官网headroom.js
官网提供三种方式使用，我这里使用js调用：
1、在头部调用js库
|
1 2 3 |
<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样式
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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库
|
1 2 3 4 |
<script> //#header-nav为导航栏的id $("#header-nav").headroom(); </script> |
注意事项：
- 调用库的时候需要注意先后顺序；
- js初始化要么放在head里面，需要放在$(document).ready(function(){$(“#header-nav”).headroom();})，或者放在body最下面写，以防止页面还没有加载，获取不到id
二、不用插件，响应式底部提示信息，鼠标向上隐藏，向下显示
我自己后来也可以不用插件写了底部的提示信息，鼠标向上滑动时，底部信息隐藏或者放在页面最下面，鼠标向下滑动时，底部信息固定在底部。
思想：监测鼠标运动方向，是向上还是向下运动，然后执行相应的功能
代码：
css样式：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<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代码：
|
1 2 3 4 5 6 7 8 9 10 11 |
<!--页脚开始--> <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代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<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
欢迎转载，转载需带着文章出处链接~~