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

CSS文字超出隐藏添加省略号及失效处理

在前端页面中文字超出隐藏并添加省略号是比较常见的样式处理,实际CSS样式中单行省略和多行省略的样式有所差异,在某些特殊场景下多行超出的样式会不生效,本文给出相关解决方案

clipboard.js实现一键复制

clipboard.js相比早期基于flash制作的一键复制插件具有更好的兼容性,关键对于手机浏览器支持良好,无需其他依赖,使用简单,并且提供了钩子函数用于自定义的实现

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

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

Jquery中.attr()和.prop()方法

Jquery中使用attr()方法动态设置多选框被选中状态时不生效或需要操作多次方可生效的问题可通过prop()替代完成,当需要设置html原生属性时最好使用prop()方法来进行操作

Vue3中无需引入Vuex的替代方案

Vue3 中所提供组合 API、ref、reactive、provide、inject几大特性,可以支持完成全局状态管理能力,Vuex 是为 Vue 单独提供的状态管理插件,相对比较笨重,如果项目简单可以尝试替代

Jquery+CSS3实现网页入场动画特效

多数网站首页的数据往往是最庞大的,三到五秒打开都算比较优秀,因此设置一个开场(预加载)动画特效能够大幅度提升用户感官体验,这里分享本站使用的加载动画,整体比较简约清新

选择个人头像

昵称

邮箱

QQ

网址

评论提示

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