龙笑天龙笑天  2016-04-25 06:25 龙笑天下 隐藏边栏 |   11 条评论  3,474 
文章评分 25 次,平均分 5.0

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

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

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

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

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

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

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

<!-- 智能显示隐藏导航栏 https://www.ilxtx.com/auto-hide-navbar.html -->
<script type="text/javascript" src="https://npmcdn.com/headroom.js@0.9.3/dist/headroom.min.js"></script>
<script>
    (function() {
    new Headroom(document.querySelector("#nav-scroll"), { //这里的 nav-scroll 改为你的导航栏的 id 或 class
        offset : 5, // 在元素没有固定之前,垂直方向的偏移量(以 px 为单位)
            tolerance: 5, // scroll tolerance in px before state changes        
        classes: {
            initial: "animated",  // 当元素初始化后所设置的 class
            pinned: "slideUp", // 向上滚动时设置的 class
            unpinned: "slideDown" // 向下滚动时所设置的 class
        }
    }).init();    
    }());
</script>

然后,加上样式就 over 了:

.animated {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}
.animated.slideDown {top: -100px;}
.animated.slideUp {top: 0;}

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

参考资料:

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

「点点赞赏,手留余香」

还没有人赞赏,快来当第一个赞赏的人吧!

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

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

发表评论

评论
正在努力加载中...
扫一扫二维码分享