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

2016-04-25 06:25 3,967 11 条评论 龙笑天下
Dragon主题购买

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

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

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

这个时候,我们就可以通过本文的方法(使用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/[email protected]/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

「点点赞赏,手留余香」

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

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

2016-04-06

2016-05-04

发表评论

表情 格式 贴图 链接 私密 签到
Dragon主题购买阿里云特价云服务器1核2G低至86元,N4共享型服务器3年仅需799元腾讯云特价云服务器1核2G 88元/年 2核4G3M688元/3年,更有千元代金券礼包免费领!
评论
正在努力加载中...
扫一扫二维码分享
×
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies. Learn more
Dragon