龙笑天龙笑天  1年前 (2016-04-25) 来源:龙笑天下 隐藏边栏 |   7 条评论  513 
文章评分 22 次,平均分 5.0

为了给浏览页面的用户提供更快捷、方便的导航,很多网站都提供了导航菜单栏随滚动条上下滚动的做法,以减少用户不必要的操作来提高网站用户粘度。

并且很多的网站把导航条固定在网页的顶上,这样虽然好看,但是有的时候我们要在页面上呈现很多东西的时候,我们就会觉得固定在顶部的导航条是多余的。

这个时候,我们就可以通过本文的方法(使用headroom.js),使我们的网页在向下方滚动的时候,顶部的导航条会自动收起来(隐藏);网页在向上方滚动的时候,顶部的导航条再自动出现(显示)。这样就能给我们的页面更多的空间,视野更加开阔。相应效果请滑动本页观察本站导航栏的变化!

headroom.js的工作原理是:通过感应目标元素不同的3种状态(原始,下滚,上滚),为目标元素更改相应的class,通过相应的class的css样式的变化得到所要的效果。

下面龙笑天下就介绍实现方法:

第一种方式(推荐)

首先,在footer中加载下面的js:

然后,加上样式就over了:

其中的class要与上面js中的相对应!

第二种方式

首先,依次引入下面4个js,注意顺序别错了,严格遵守!

其中,第一个jquery一般wordpress主题都带有了就可以不必再加载了;.navbar-fixed-top为导航栏的class(也可以是id)。

然后,在引入css就ok了:

下面再给个具体的例子,用editplus或其它编辑器保存为html网页,双击即可看效果。修改自@大学IT网

参考资料:

github中的源代码
headroom.js官网
headroom.js中文官网
简书headroom.js

 

除特别注明外,本站所有文章均为龙笑天下原创,转载请注明出处来自:http://www.ilxtx.com/auto-hide-navbar.html

龙笑天
龙笑天 最后编辑于:2016-06-05
互助分享,互联网本该如此!
×

感谢您对龙笑天的支持,么么哒~

支付宝打赏 龙笑天
请扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

龙笑天下 - 分享悲伤;共享快乐

发表评论

表情 链接 贴图 私信 格式 签到

最赞评论
  1. boke112导航
    boke112导航 评论达人 LV.3 来自天朝的朋友 谷歌浏览器 Windows XP 广西南宁市 /桂林市

    这个确实不错,比起直接固定的好

  2. 龙笑天
    龙笑天 年费会员 博 主

    @成航先森没有啊,一般主题都已经含有jquery了,我用的第一种方式,就2个js

  3. 龙笑天
    龙笑天 年费会员 博 主

    @boke112导航这样感觉更人性化了吧 [偷笑]

  1. 我爱动感单车网
    我爱动感单车网 评论达人 LV.3 来自天朝的朋友 谷歌浏览器 Windows XP 广西桂林市 电信

    [流汗] 我的主题不适应这个,因为“头部+导航”来的面积太大了,只能是表示望洋兴叹了,呵呵!

    4楼 2016-07-12 23:27
    1 0 回复
  2. boke112导航
    boke112导航 评论达人 LV.3 来自天朝的朋友 谷歌浏览器 Windows XP 广西南宁市 /桂林市

    这个确实不错,比起直接固定的好

    地板 2016-04-28 14:32
    8 0 回复
  3. 成航先森
    成航先森 评论达人 LV.3 来自天朝的朋友 Netscape Navigator iPhone iPhone OS 8_1 like Mac OS X) AppleWebKit 四川省成都市 移动GSM/TD-SCDMA/LTE全省共用出口

    我的导航栏没放在顶部,不用担心这些了。但是要加的js还真是多啊,4个。

    板凳 2016-04-25 10:43
    0 0 回复
  4. 纯洁博客
    纯洁博客 评论达人 LV.1 来自天朝的朋友 火狐浏览器 Windows 10 重庆市巴南区 界石镇海盗网吧

    这个不错啊

    沙发 2016-04-25 10:18
    1 0 回复
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录。
使用QQ或微博快捷登录后,请完善个人资料中的电子邮件地址,便于及时收到回复提醒邮件和用于登录!

切换登录

注册

扫一扫二维码分享