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

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

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

官网提供三种方式使用,我这里使用js调用:

1、在头部调用js库

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

3、初始化js库

注意事项:

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

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

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

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

代码:

css样式:

html代码:

js代码:

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

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

 

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

发表评论

电子邮件地址不会被公开。

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