前端案例--仿京东商城楼梯式导航定位菜单

实现京东商城楼梯式导航定位菜单:滚动定位菜单项和点击定位菜单项!

这里写图片描述

涉及知识点:find()、parent()、offset()、scroll()等jQ函数,请自觉复习各种函数!

html代码:

<!-- 导航菜单 -->
    <div id="menu">
        <ul>
            <li>1F<span>服饰</span></li>
            <li>2F<span>美妆</span></li>
            <li>3F<span>手机</span></li>
            <li>4F<span>家电</span></li>
            <li>5F<span>数码</span></li>
            <li>6F<span>运动</span></li>
            <li>7F<span>居家</span></li>
            <li>8F<span>母婴</span></li>
            <li>9F<span>食品</span></li>
            <li>10F<span>图书</span></li>
            <li>11F<span>服务</span></li>
        </ul>
    </div>
    <!-- 导航菜单 -->
    <!-- 产品内容 -->
    <div id="content">
        <img src="images/head.png" alt="" style="border:1px solid red;">
        <div class="louti" id="louti1"><img src="images/f1.png" alt=""></div>
        <div class="louti" id="louti2"><img src="images/f2.png" alt=""></div>
        <div class="louti" id="louti3"><img src="images/f3.png" alt=""></div>
        <div class="louti" id="louti4"><img src="images/f4.png" alt=""></div>
        <div class="louti" id="louti5"><img src="images/f5.png" alt=""></div>
        <div class="louti" id="louti6"><img src="images/f6.png" alt=""></div>
        <div class="louti" id="louti7"><img src="images/f7.png" alt=""></div>
        <div class="louti" id="louti8"><img src="images/f8.png" alt=""></div>
        <div class="louti" id="louti9"><img src="images/f9.png" alt=""></div>
        <div class="louti" id="louti10"><img src="images/f10.png" alt=""></div>
        <div class="louti" id="louti11"><img src="images/f11.png" alt=""></div>
    </div>
    <!-- 产品内容 -->
    <!-- 底部 -->
    <div id="footer" class="container"></div>

css代码:

#menu{
        width:32px;height:360px;
        position:fixed;
        top:200px;left:0px;
        display: none;
    }
    #menu ul li{
        width:32px;height:32px;
        list-style-type:none;
        color:#8F8583;
        text-align:center;
        line-height: 32px;
        border-bottom:1px dotted #ddd;
        position:relative;
    }
    #menu ul li span{
        display:block;width:32px;height:32px;
        background:#C81623;
        position:absolute;
        top:0;left:0;
        color:#fff;font-size:12px;
        display: none;
    }
    #menu ul li:hover span{display:block; }
    #menu ul li span.active{color:#C81623;background:#fff;display:block;}
    #content{
        width:1220px;
        margin:0 auto;
    }  
    #footer{width:1220px;height:600px;background:#FE7678;}
    .container{margin:0 auto;}

jQuery代码:

$(function(){
        var _index=0;
        $("#menu ul li").click(function(){
            $(this).find("span").addClass("active").parent().siblings().find("span").removeClass("active");
            _index=$(this).index()+1;
            //通过拼接字符串获取元素,再取得相对于文档的高度
            var _top=$("#louti"+_index).offset().top;
            //scrollTop滚动到对应高度
            $("body,html").animate({scrollTop:_top},500);
        });
        var nav=$("#menu"); //得到导航对象
        var win=$(window); //得到窗口对象
        var sc=$(document);//得到document文档对象。
        win.scroll(function(){

          if(sc.scrollTop()>=600){
           $("#menu").show(); 
           //获取滚动元素对应的索引!!!重难点
            var index=Math.floor(sc.scrollTop()/600);

            $("#menu ul li span").eq(index-1).addClass("active").parent().siblings().find("span").removeClass("active");
          }else{
           $("#menu").hide();
          }
        });
    });
 滚动中常用到的jQ写法:

 $("body,html").animate({scrollTop:_top},500);

总结:相对来说,这是个蛮有趣的实践案例,但其中用到比较多的函数,结合了本案例比较特殊的html结构设计,需要理清滚动导航时候的条件判断。

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值