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样式中单行省略和多行省略的样式有所差异,在某些特殊场景下多行超出的样式会不生效,本文给出相关解决方案

CSS3通过Gradients实现渐变背景色

使用背景色渐变可以使得页面质感得到大幅度提升,CSS样式中通过gradients属性指定两个或多个颜色之间平滑过渡,由于颜色的渐变是由浏览器生成,因此不会出现不同分辨率下失真的情况。

侧边栏下滑即将越过时动态固顶与上滑恢复

对于很多二栏布局的网站而言,正文部分过长时,侧边栏区域下拉过程中出现大片空白,因此我们可以实现当屏幕下滑达到指定元素位置(如即将越过)后对元素固顶来解决侧边栏区域的空旷感

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

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

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

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

前端多终端自适应网页开发模式

智能移动终端大爆发的现阶段,手机访问网页已经成为人们不可或缺的使用习惯,开发自适应网页大势所趋,实际上无论改造还是开发本身并不复杂,但是掌握更好的开发模式会使得你编写页面更加高效快捷

选择个人头像

昵称

邮箱

QQ

网址

评论提示

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