一、响应式导航栏,鼠标向上显示,向下隐藏
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>
注意事项:
- 调用库的时候需要注意先后顺序;
- 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
欢迎转载,转载需带着文章出处链接~~