文档章节

前端那些事之原生js篇--封装快速导航

上官清偌
 上官清偌
发布于 2017/04/23 11:16
字数 935
阅读 38
收藏 3

面向对象封装快速导航效果

html 页面

<!--侧边导航 start-->
<div class="quick-nav" id="quickNav">
    <!--# null最次 link javascript:;  javascript:void(0);-->
    <a href="javascript:void(0);" class="qn-item active" data-index="0">热销推荐</a>
    <a href="javascript:void(0);" class="qn-item" data-index="1">母婴玩具</a>
    <a href="javascript:void(0);" class="qn-item" data-index="2">生鲜水果</a>
    <a href="javascript:void(0);" class="qn-item" data-index="3">家具建材</a>
    <a href="javascript:void(0);" class="qn-item" data-index="4">医药保健</a>
    <a href="javascript:void(0);" class="qn-item" data-index="5">珠宝饰品</a>
    <a href="javascript:void(0);" class="qn-item" data-index="6">户外活动</a>
    <a href="javascript:void(0);" id="goTop">返回顶部</a>
    <div class="nav-status"></div>
</div>
<!--侧边导航 end-->

css 样式

@charset "utf-8";
.quick-nav{
    width:75px;
    text-align:center;
    line-height:50px;
    z-index:10;
    transition:all .5s;
    position:fixed;
    right:0px;
    top:10%;
    background:#ddd;
    opacity:0;
    transform:translateY(-10px);
    transition:all 1s;
}
.show-quick-nav{
    opacity:1;
    transform:translateY(0px);
}
.quick-nav a{
    color:#333;
    display:block;
    transition:all .3s;
}
.quick-nav a.active{
    color:#fff;
}
.quick-nav .nav-status{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
    height:50px;
    width:100%;
    background:#f90;
    transition:all .3s;
}

js 调用

//        调用侧边导航
        var quickNav=document.getElementById("quickNav"),
            qnItem = quickNav.getElementsByClassName("qn-item"),//获取所有快捷导航元素
//        获取标题的属性
            tilteEle = document.getElementsByClassName("home-title"),
//            导航选中的元素
            qnActive=quickNav.getElementsByClassName("active"),
//            获取导航偏移的元素
            navStatus=quickNav.getElementsByClassName("nav-status")[0],
//            获取返回至顶
            goTop=document.getElementById("goTop");
         new QuickNav({
             quickNav:quickNav,
             qnItem: qnItem,
             tilteEle: tilteEle,
             qnActive:qnActive,
             navStatus:navStatus,
             goTop:goTop
        })

js封装

/*
 * 封装一个快捷导航组件
 *
 *
 * <!--侧边导航实现思路-->
 <!--
 1、单独设置背景
 2、点击走动:获取相应标题滚动到页面顶部的高度(class或标签,建议是class),跳转到获取的位置即可
 一:定义一个自定义属性,标记为当前的下标
 二:点击获取属性
 三:获取标题[获属性下标],然后获取到页面高度
 四:跳转到相应位置
 3、滚动页面:获取当前高度、匹配当前高度和标题高度,如果当前高度是在标题高度以内,那么就判定是当前标题的状态
 4、滚动到页面顶部隐藏快捷操作
 -->
 *
 *
 * */
(function (window, undefind) {
    "use strict";
    function QuickNav(obj) {
        this.init(obj)
    }
    QuickNav.prototype = {
        construct: QuickNav,
        init: function (obj) {
            // 初始化
            this.quickNav=obj.quickNav||'';//快捷导航最大的盒子
            this.qnItem = obj.qnItem || '';//每一个导航元素
            this.tilteEle = obj.tilteEle || '';//每一个要跳转的标题
            this.qnActive=obj.qnActive||'';//导航选中的元素
            this.navStatus=obj.navStatus||'';// 获取导航偏移的元素
            this.goTop=obj.goTop||"";//获取返回到顶部
            //遍历每一个快捷元素
            for (var i = 0; i < this.qnItem.length; i++) {
                var tilteEle = this.tilteEle;
                //点击获取每一个元素的标识
                this.qnItem[i].onclick = function () {
                    //获取标题[获属性下标],然后获取到页面高度
                    var _this = this;
                    var goScroll = tilteEle[_this.getAttribute("data-index")].offsetTop;
                    window.scrollTo(0, goScroll);
                }
            }
            this.scroll();
        },
        //调用方法
        scroll:function () {
            /*
             onscroll调用次数比较频繁,所以要注意性能
             */
            var _this=this;
            window.onscroll=function () {
                _this.chooseNav();
            }
        //    为了防止页面在中间停止不跳转,所以在调用一次
            _this.chooseNav();
            _this.goTop.onclick=function () {
                /*如果想通过原生JS来实现过度跳转到相应位置,那么可以使用定时器
                 获取当前滚动高度,然后对高度逐一递减
                 如果要判断是上去还是下去,直接对当前到顶部的高度和点击的高度对比即可
                 */
                window.scrollTo(0,0);
            }
        },
    //选择跳转到那一个导航
        chooseNav:function () {
            var _this=this,
            //获取当前的高度
             currScrollTop=document.body.scrollTop||document.documentElement.scrollTop;
            //判断显示还是隐藏
            if(_this.tilteEle[0].offsetTop>currScrollTop){
                _this.quickNav.className='quick-nav';
            }else {
                _this.quickNav.className+= " show-quick-nav";;
            }
            for (var i = 0; i < this.tilteEle.length; i++) {
                //当前高度和每一个要跳转的标题高度作比较
                if(currScrollTop<=this.tilteEle[i].offsetTop){
                //    获取当前选中的导航
                   var chooseNav= _this.qnActive;
                   if(chooseNav.length>0){
                        chooseNav[0].className= "qn-item";//可以改为获取class,然后替换掉active,去掉空格用trim()
                   }
                   _this.qnItem[i].className="qn-item active";
                   //每个导航的高度为50
                   _this.navStatus.style.top=50*i+"px";
                   break;
                }
            }
        }
    }
    window['QuickNav'] = QuickNav;
}(window));

© 著作权归作者所有

共有 人打赏支持
上官清偌
粉丝 11
博文 85
码字总数 118519
作品 0
浦东
程序员
weex eros框架源码解析

weex eros是基于alibaba weex框架进行二次封装的客户端跨平台开发框架,主要是为前端开发者(可以不用熟悉客户端开发)提供的一站式客户端app开发解决方案。官网地址为:https://bmfe.github...

雅爸学技术
05/27
0
0
React Native 与原生模块数据通信(一)(iOS)

(一)iOS日历模块封装演示 下面开始演示如何封装一个iOS日历原生模块,让JavaScript可以进行访问到iOS平台日历的功能。 在React Native中,原生模块就是一个Objective-C类,该实现了RCTBridge...

manofit
05/24
0
0
javascript统一世界?

[到微信关注我][1]今天facebook将react native框架的源码开源,瞬间火得一塌糊涂,目前github上的star已经快7000了。javascript作为这个框架的开发使用语言又一次出现在人们面前。这几年jav...

卢勇福
2015/03/28
0
0
67 个节省开发者时间的实用工具、库与资源(前端向)

在这篇文章中,我不会与大家谈论大型的前端框架,如 React、Angular、Vue 等,也没有涉及那些流行的代码编辑器,如 Atom、VS Code、Sublime,我只想与大家分享一个有助于提升开发人员效率的工...

张孝国
06/26
0
0
用js来实现那些数据结构及算法—目录

  首先,有一点要声明,下面所有文章的所有内容的代码,都不是我一个人独立完成的,它们来自于一本叫做《学习JavaScript数据结构和算法》(第二版),人民邮电出版社出版的这本书。github代...

zaking
05/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

深夜胡思乱想

魔兽世界 最近魔兽世界出了新版本, 周末两天升到了满级,比之前的版本体验好很多,做任务不用抢怪了,不用组队打怪也是共享拾取的。技能简化了很多,哪个亮按哪个。 运维 服务器 产品 之间的...

Firxiao
5分钟前
0
0
MySQL 8 在 Windows 下安装及使用

MySQL 8 带来了全新的体验,比如支持 NoSQL、JSON 等,拥有比 MySQL 5.7 两倍以上的性能提升。本文讲解如何在 Windows 下安装 MySQL 8,以及基本的 MySQL 用法。 下载 下载地址 https://dev....

waylau
39分钟前
0
0
微信第三方平台 access_token is invalid or not latest

微信第三方开发平台code换session_key说的特别容易,但是我一使用就带来无穷无尽的烦恼,搞了一整天也无济于事. 现在记录一下解决问题的过程,方便后来人参考. 我遇到的这个问题搜索了整个网络也...

自由的开源
今天
0
0
openJDK之sun.misc.Unsafe类CAS底层实现

注:这篇文章参考了https://www.cnblogs.com/snowater/p/8303698.html 1.sun.misc.Unsafe中CAS方法 在sun.misc.Unsafe中CAS方法如下: compareAndSwapObject(java.lang.Object arg0, long a......

汉斯-冯-拉特
今天
2
0
设计模式之五 责任链模式(Chain of Responsibility)

一. 场景 相信我们都有过这样的经历; 我们去职能部门办理一个事情,先去了A部门,到了地方被告知这件事情由B部门处理; 当我们到了B部门的时候,又被告知这件事情已经移交给了C部门处理; ...

JackieRiver
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部