Jquery+CSS轻松实现导航动态显示隐藏

绝大多数网站都会有个顶部导航,对于手机端而言为了便于访问导航常常会做固顶操作,通过CSS样式配合Jquery的scroll()方法或原生JS监听滑动事件方法,可以轻松实现下滑隐藏,上滑显示的效果

所属分类 WEB

相关标签 JQueryCSS导航

导航动态显示隐藏

实现页面下滑时,固顶导航自动上滑隐藏。

实现页面上滑时,固定导航自动下拉显示。

需求的核心点在于判断页面当前为下滑还是上滑。

此外导航的显示与隐藏不能太过于突兀,采用平滑的动画效果更好。

CSS代码

/*动画样式*/
/*当元素产生变化时,0.6S内完成此变化*/
*{
    -webkit-transition:all .6s;
    -moz-transition:all .6s;
    -ms-transition:all .6s;
    -o-transition:all .6s;
    /*上面四条为了兼容各个内核的浏览器,实际仅需下方一条样式*/
    transition:all .6s;
}
/*固顶导航样式*/
/*这个样式在Headroom.js小插件一文中也用到了*/
header{
    height: 60px;
    width: 100%;
    background:#2c4762;
    position:fixed;
    /*顶部距离*/
    top: 0;
}
/*下滑触发追加的CSS*/ 
/*追加此样式时,导航在0.6S时间内从顶部上滑至-60px负距离*/
.down{
    /*顶部负距离,一般和导航高度一致*/
    top:-60px;
}

JS代码

$(function(){
    //记录顶部距离
    var windowTop=0;
    //触发页面滑动时会进入此方法
    $(window).scroll(function(){
        //获取当前可视区域距离页面顶端的距离
        var scrolls = $(this).scrollTop();
        //当scrolls>windowTop时,表示页面在向下滑动
        if(scrolls>=windowTop){
            //追加样式并记录新的距离
            $("#header").addClass("down");
            windowTop=scrolls;
        }else{
            $("#header").removeClass("down");
            windowTop=scrolls;
        }
    });
});

Headroom.js小插件

有一款轻量级、高性能的JS小工具(不依赖任何工具库),它能在页面滚动时做出响应。

Headroom.js 使得我们只需要极少的代码就能完成这项诉求。

其实现思路和尚未描述的一致。

响应滚动事件的页面元素增加或删除一个CSS class,已达到导航栏的显示和隐藏。

<!-- 这三种状态均由headroom.js进行完成 -->
<!-- 初始状态 -->
<header class="headroom">
<!-- 向下滚动时 -->
<header class="headroom headroom--unpinned">
<!-- 向上滚动时 -->
<header class="headroom headroom--pinned">

Headroom.js提供了多种调用方式,为了更能够浅显易懂的使用工具,米虫提供一个最简的Demo以便于理解。

米虫比较偷懒,直接用的Jquery的写法。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Headroom.js轻松实现导航动态显示隐藏DEMO - 米虫博客</title>
    <meta name="keywords" content="米虫,前端,DEMO">
    <meta name="description" content="Headroom.js轻松实现导航动态显示隐藏的DEMO">
</head>
<body>
    <style>
    /*导航的原始固顶样式*/
    .header
    {
        position: fixed;
        text-align: center;
        width: 100%;
        height: 50px;
        background: #333;
        color: #fff;
        line-height: 50px;
        font-size: 24px;
    }
    /*导航常规CSS*/
    .headroom
    {
        top: 0px;
        /*延时*/
        transition: all 1s;
    }
    /*导航下滚CSS*/
    .headroom--unpinned
    {
        top: -100px;
    }
    /*导航上滚CSS*/
    .headroom--pinned
    {
        top: 0px;
    }
    .body
    {
        padding: 100% 40px;
        text-align: center;
        background: #eee;
    }
    </style>
    <div id="header" class="header headroom">
        顶部导航
    </div>
    <div class="body">
        为了便于展示,正文区域可以设计高一些,可以上下拖动测试
    </div>
    <!-- 加载Jquery -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <!-- 加载Headroom -->
    <script src="https://cdn.bootcss.com/headroom/0.9.4/headroom.min.js"></script>       <script src="https://cdn.bootcss.com/headroom/0.9.4/jQuery.headroom.min.js"></script>
    <!-- 初始化头部 -->
    <script>
        $("#header").headroom();
    </script>
</body>
</html>

米虫这里直接采用了工具默认的样式Class名,如果需要自定义Class名,可以通过官方文档查看其初始化方式!

小结

其实本功能比较简单,无需插件实现起来也很容易。

米虫

做一个有理想的米虫,伪全栈程序猿,乐观主义者,坚信一切都是最好的安排!

本站由个人原创、收集或整理,如涉及侵权请联系删除

本站内容支持转发,希望贵方携带转载信息和原文链接

本站具有时效性,不提供有效、可用和准确等相关保证

本站不提供免费技术支持,暂不推荐您使用案例商业化

发表观点

提示

昵称

邮箱

QQ

网址

当前还没有观点发布,欢迎您留下足迹!

同类其他

WEB

nvm管理node.js和npm多版本切换

在业务中我们会出现不同的项目依赖与不同版本的 node.js,总不能每次跑项目的时候都去重新安装对应版本的 node.js 和依赖,使用 nvm 可以让多个版本的 node.js 共存,并提供管理和切换

Jquery中bind()、live()、delegate()和on()的区别

自Jquery1.7起,on()方法是 bind()、live()、delegate() 方法的新的替代品,我们推荐使用on()来处理业务中的事件绑定,通过理解这些方法的差异能够更加清晰明白使用on()方法的优势所在

Jquery.bind()实现前端字段公共校验器

严谨的页面开发需要着重关注前台校验相关的内容,确保请求参数的合法以保证服务器安全,界面参数众多需要建立一个公共方法,公共校验器的核心方法是Jquery.bind()

前端JS对字段编码预防XSS攻击

跨站脚本攻击是比较严重的一种攻击行为,恶意脚本注入到相关页面字段中轻易获取敏感信息和向后端发起请求,前端应用应当对请求数据进行编码

SVGInject插件动态加载SVG并自定义样式

HTML 中加载 SVG 有很多种方式,但如果需要在 HTML 中通过 CSS 样式自由控制 SVG 样式就必须将 svg 标签插入网页找那个成为 DOM 的一部分,本文借助 SVGInject 插件可以快速完成这一操作

通过Vuex实现全局状态管理

Vuex 是一个专为 Vue 应用程序开发的状态管理模式,通过集中式存储应用所有组件的状态,依照规则确保状态可以进行标准方式变化,比较适合应用在公共基础数据存放,如:用户信息

选择个人头像

昵称

邮箱

QQ

网址

评论提示

  • 头像:系统为您提供了12个头像自由选择,初次打开随机为你选择一个
  • 邮箱:可选提交邮箱,该信息不会外泄,或将上线管理员回复邮件通知
  • 网址:可选提交网址,评论区该地址将以外链的形式展示在您的昵称上
  • 记忆:浏览器将记忆您已选择或填写过得信息,下次评论无需重复输入
  • 审核:提供一个和谐友善的评论环境,本站所有评论需要经过人工审核