继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

根据滚动条方向显示隐藏导航

极客教程
关注TA
已关注
手记 58
粉丝 286
获赞 3794

今天在做一个项目的时候,遇到了这个需求,于是就整理了几种实现方法。

1. 用headroom.js

Headroom.js 是什么?

Headroom.js 是一个轻量级、高性能的JS小工具(不依赖任何工具库!),它能在页面滚动时做出响应。此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航条消失,当页面向上滚动时,导航条就出现了。

Headroom.js 有什么用?

固定页头(导航条)可以方便用户在各个页面之间切换。但是这也会带来些问题…

大屏幕一般都是宽度大于高度的,也就是说屏幕高度要少一些。固定页头会占用一部分本来可以用于展示内容的区域。小屏幕一般是高度较大,但是别忘了,屏幕本来就小,页头再占用一部分的话,屏幕可用于展示内容的区域当然还是少。

Headroom.js 能帮你把不需要的页面元素在合适的时间展示出来,让用户花更多时间关注你页面上的内容。

工作原理

简单来说,headroom.js 只是为需要响应滚动事件的页面元素增加或删除一个CSS class:

<!-- 初始状态 --><header class="headroom">
<!-- 向下滚动时 --><header class="headroom headroom--unpinned">
<!-- 向上滚动时 --><header class="headroom headroom--pinned">

通过CSS class的设置,事情变得简单了。所有的控制权就交回到了你的手中,当页面向上或向下滚动时,你就可以通过设置CSS样式来做出自己需要的变化了。
用法
使用 headroom.js 是很简单的。它提供了简单的 JS API,另外,还可以作为 jQuery/Zepto 插件使用。
纯JS调用方式

// 获取页面元素var myElement = document.querySelector("header");
// 创建 Headroom 对象,将页面元素传递进去var headroom = new Headroom(myElement)
;// 初始化headroom.init(); 

以 jQuery/Zepto 插件形式调用

// 是不是很简单!
// 注意: init() 默认在插件内部被调用了
$("#header").headroom();

插件还提供了一个 data-* API :

<!-- selects $("[data-headroom]") --><header data-headroom>

注意:为了兼容,Zepto 的data module 也需要引入。
更多可以查看headroom.js

2. jquery实现

实现滚动条向下隐藏导航。向上显示导航。
代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动条的方向</title>
<style>
*{padding:0; margin:0}
.nav{ height:100px; width:100%; background:rgba(0,0,0,0.5); position:fixed; top:-100px;left:0; transition:0.3s;}
.nav.on{ top:0}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var top1=0;
    $(".nav").addClass("on");
    $(window).scroll(function(){
        var top2=$(window).scrollTop();

        if(top2>top1){
            $(".nav").removeClass("on")
        }else{
            $(".nav").addClass("on")
        }
        top1=top2;
    })
})

</script>
</head>
<body>
<div class="nav">
</div>
<script>
for(var i=0; i<100; i++){
    document.write("<h1>"+i+"</h1>")    
}
</script>
</body>
</html>
3.javascript实现

原理都是一样的,增加或者去除class
直接上代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动条的方向</title>
<style>
*{padding:0; margin:0}
.nav{ height:100px; width:100%; background:rgba(0,0,0,0.5); position:fixed; top:-100px;left:0; transition:0.3s;}
.nav.on{ top:0}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
window.onload=function(){
    var top1=0;
       var nav=document.getElementById('nav');
       window.onscroll=function(){
               var top2=document.body.scrollTop || document.documentElement.scrollTop;
               if(top2>top1){
                   nav.style=" height:100px; width:100%; background:rgba(0,0,0,0.5); position:fixed; top:-100px;left:0; transition:0.3s;"
               }else{
                   nav.style=" height:100px; width:100%; background:rgba(0,0,0,0.5); position:fixed; top:0;left:0; transition:0.3s;"
               }
                  top1=top2;
      }
}
</script>
</head>
<body>
<div class="nav" id="nav">
</div>
<script>
for(var i=0; i<100; i++){
    document.write("<h1>"+i+"</h1>")    
}
</script>
</body>
</html>
打开App,阅读手记
4人推荐
发表评论
随时随地看视频慕课网APP