JS 吸顶导航,告别“回到顶部”

当我们浏览页面篇幅较大,浏览过半的时候想回到导航位置,只能通过往回滚动或通过”回到顶部”重新滚动到导航位置,这样的操作显得繁琐与不便。于是便有了吸顶式导航的交互方式,吸顶条导航最大的好处是将最常用或者设计者最愿意让用户看到的内容、功能经常保持在用户面前,为用户提供了极大的便利与交互体验。

本文主要内容

1、吸顶导航是什么

2、吸顶导航的实现方法

3、小结

1、吸顶条导航是什么

如图:

吸顶导航栏的初始位置一般是靠近在页面的顶部位置,但是又存在一定距离,通常这块区域放置最为醒目或者重要元素的地方,如Banner图。

当页面向下滚动时超过了吸顶导航的初始位置时,需要把吸顶导航栏固定在窗口顶部,一般吸顶导航栏还可以替换成文章标题栏,搜索框、tab条等等,例如百度糯米,天猫,淘宝最为常用。它们共同点是在内容或者功能上比较重要,但又不是最重要的元素,最重要的一般会放置于顶部。明白了吸顶导航条的基本效果,下面写个简单的demo吧。

2、吸顶导航的实现方法

一、样式结构搭建

考虑到触发吸顶功能,需要为导航条设置触发后的样式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
        }
        #nav {
            width: 100%;
            height: 60px;
            background: #39f;
            color: #fff;
            line-height: 60px;
            text-align: center;
            padding: 0;
            margin: 0;
            list-style: none;
        }
        #nav li{
            float: left;
            width: 25%;
            height: 60px;
        }
        .fix {
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
    <body>
        <div class="wrap">
            <h1>H5-学堂</h1>
            <p>HTML5学堂是一个热爱H5的讲师组成的组织,致力于构建一个前端、HTML5的分享平台,能够给学生提供一些资料,也为广大前端爱好者提供一个分享平台,其中涉及到的基本知识,JS底层知识,JS底层知识,面试真题、相关技术、未来发展等。</p>
            <ul id="nav">
                <li>HTML5学堂</li>
                <li>HTML5微博</li>
                <li>HTML5贴吧</li>
                <li>HTML5微信</li>
            </ul>
            <div class="con">
                <p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
                <p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
                <p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
                <p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
                <p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
                <p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
                <p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
                <p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
                <p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
                <p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
                <p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
                <p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
                <p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
                <p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
                <p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
                <p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
            </div>
        </div>
    </body>
</html>

ps:内容区要够长,不然无法滚动。

二、吸顶功能添加

1.实现思路是监听 scroll 事件,判断当前页面的滚动位置,当滚动距离大于导航条距顶部的距离时,为导航条采用窗口定位。

2.与“回到顶部“的实现方法一样,但是会发现实现吸顶功能时,到了临界位置时,页面会抖动一下,因为当导航条fixed出去,下部内容填补了导航条离开的位置。抢占了导航条的位置,所以抖动了一下。此处我们设置一个占位符,守住导航条的位置

<script>
    var tit = document.getElementById('nav');
    // 占位符设置
    var rect = tit.getBoundingClientRect();//获得页面中导航条相对浏览器视窗的位置。
    var inseDiv = document.createElement('div');
    tit.parentNode.replaceChild(inseDiv, tit);
    inseDiv.appendChild(tit);
    inseDiv.style.height = rect.height + 'px';
    // 获取导航条距页面顶部的距离
    var titTop = tit.offsetTop;
    //设置滚动监听事件
    document.onscroll = function() {
            //获取当前滚动距离
            var btop = document.body.scrollTop || document.documentElement.scrollTop;
            //如果滚动距离大于导航条距顶部距离
            if (btop > titTop) {
                    //为导航条设置fixed
                    tit.className = "clearfix fix";
            }else {
                    //移出fixed
                    tit.className = "clearfix";
            }
    }
</script>

实现效果:

3、小结

吸顶导航的交互方式极大的提高了用户体验,是电商网站网站最常用的交互效果之一,希望本文能给大家带来一些帮助。

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-12-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯大讲堂的专栏

如何做一个让人闻风丧胆的H5

前言 最近火热的有声娱乐平台 APP,企鹅 FM,在8月28日鬼节前夕,联合《盗墓笔记》推出了“勇敢者的游戏”活动。作为一个 UI 工程师,在这个移动互联网叱咤...

21460
来自专栏Crossin的编程教室

【Pygame 第4课】 获取鼠标位置

最近微信上很火的“打飞机”游戏,通过手指在屏幕上触摸的位置来移动你的飞机。在电脑上,我们没法直接用手操作,但可以用鼠标替代手指。 在电脑游戏里,鼠标是个很好用的...

532120
来自专栏用户2442861的专栏

CSS中height:100%和height:inherit的异同

2. 大多数情况作用是一样的 除去兼容性,大多数情况下,两者作用是一样的,甚至都很难想出不一样的理由。

10010
来自专栏大数据钻研

前端面试经典问题:CSS中居中的几种方式

作为面试常客,学会这些,面试多点把握,同学间逼格升高 周五,老大说他面试了一个问题,是css居中的问题,然后我们在这边就讨论了一番,周末嗨玩,尾巴上想起这件事,...

51260
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(十六)-- 奇妙的 background-clip: text

50840
来自专栏数据小魔方

论一个图表的自我修养

昨天给大家讲解了商务图表制作中的黄金原则——最大化数据墨水比。 今天继续给大家解构图表的元素布局! 商务图表作为表达业务数据的重要方式,需要遵循基本的元素布局...

364110
来自专栏wblearn

纯CSS3绘制的逼真,呆萌,超酷的CSS3动画纯CSS3人物行走动画 逼真炫酷CSS3动画纯CSS3绘制的小猫笑脸动画 超呆萌纯CSS3绘制可爱小男孩动画 超酷面部表情

41110
来自专栏技术专栏

微信小程序- 移动设备的分辨率与rpx

28510
来自专栏十月梦想

HTML5音频audio和视频video用法解析

    html5新增加了2个媒体标签音频(audio)和视频(video),这样就更便于我们进行媒体化元素的内容开发网页!!!

51320
来自专栏HTML5学堂

各大公司移动端页面 - 导航的实现

HTML5学堂:伴随着科技的发展,出现了各种型号的手机,导致了HTML5移动端开发人员对页面的实现要求更高了。目前来说,移动端的实现方法没有一个统一的标准,大家...

48670

扫码关注云+社区

领取腾讯云代金券