前端那些事之原生js篇--封装快速导航
前端那些事之原生js篇--封装快速导航
上官清偌 发表于10个月前
前端那些事之原生js篇--封装快速导航
  • 发表于 10个月前
  • 阅读 35
  • 收藏 3
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

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

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

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
博文 80
码字总数 89930
×
上官清偌
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: