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

导航菜单栏随滚动条向上滚动时显示向下时隐藏 wordpress

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

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

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

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

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

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

然后,加上样式就over了:

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

参考资料:

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

 

本文为原创文章,版权归所有,欢迎分享本文,转载请保留出处!

龙笑天
龙笑天 关注:14    粉丝:6 最后编辑于:2018-02-09
互助分享,互联网本该如此!
×

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

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

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

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

发表评论

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

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

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

  2. 龙笑天
    龙笑天 年费会员 博 主 来自天朝的朋友 火狐浏览器 Windows 7

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

  3. 龙笑天
    龙笑天 年费会员 博 主 来自天朝的朋友 火狐浏览器 Windows 7

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

  1. 张小凡
    张小凡 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

    很尴尬,不知道为什么没有实现,你给的具体例子也没有实现

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

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

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

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

    地板 2016-04-28 14:32
    8 0 回复
  4. 成航先森
    成航先森 评论达人 LV.3 来自天朝的朋友 Netscape Navigator iPhone iPhone OS 8_1 like Mac OS X) AppleWebKit 四川省成都市 移动数据上网公共出口

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

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

    这个不错啊

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

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

您也可以使用第三方帐号快捷注册

扫一扫二维码分享
Tips:
网站已开启关注与粉丝功能,求哦~