文档章节

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

上官清偌
 上官清偌
发布于 2017/04/23 11:16
字数 935
阅读 39
收藏 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
博文 87
码字总数 123671
作品 0
浦东
程序员
私信 提问
【翻译】Fuse 与 React Native 或者 NativeScript 比有什么区别?

原文:https://medium.com/@fusetools/how-fuse-differs-from-react-native-and-nativescript-525344f02aaf 现在有很多不同的框架和工具可以用来构建移动应用,我们得到最普遍的一个问题就是...

leozdgao
2016/03/12
0
0
weex eros框架源码解析

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

雅爸学技术
2018/05/27
0
0
javascript统一世界?

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

卢勇福
2015/03/28
0
0
React Native 与原生模块数据通信(一)(iOS)

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

manofit
2018/05/24
0
0
切图全景 JS 发布 v1.1 版本

切图全景js是切图公司开发的一款快速开发网页场景的js,是完全开源的js框架(可能算不上js框架,因为还没有封装),这次版本更新引入了一个非常不错的类3d效果,用到了css3的动画属性和流行的...

专注做前端
2015/06/14
5.6K
14

没有更多内容

加载失败,请刷新页面

加载更多

大数据教程(11.9)hive操作基础知识

上一篇博客分享了hive的简介和初体验,本节博主将继续分享一些hive的操作的基础知识。 DDL操作 (1)创建表 #建表语法CREATE [EXTERNAL] TABLE [IF NOT EXISTS] table_name [(col_name ...

em_aaron
今天
2
0
OSChina 周四乱弹 —— 我家猫真会后空翻

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @我没有抓狂 :#今天听这个# 我艇牛逼,百听不厌,太好听辣 分享 Led Zeppelin 的歌曲《Stairway To Heaven》 《Stairway To Heaven》- Led Z...

小小编辑
今天
2
0
node调用dll

先安装python2.7 安装node-gyp cnpm install node-gyp -g 新建一个Electron-vue项目(案例用Electron-vue) vue init simulatedgreg/electron-vue my-project 安装electron-rebuild cnpm ins......

Chason-洪
今天
3
0
scala学习(一)

学习Spark之前需要学习Scala。 参考学习的书籍:快学Scala

柠檬果过
今天
3
0
通俗易懂解释网络工程中的技术,如STP,HSRP等

导读 在面试时,比如被问到HSRP的主备切换时间时多久,STP几个状态的停留时间,自己知道有这些东西,但在工作中不会经常用到,就老是记不住,觉得可能还是自己基础不够牢固,知识掌握不够全面...

问题终结者
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部