zepto商城顶部分类导航下拉菜单代码

来源：互联网发布：内蒙古大数据编辑：程序博客网时间：2024/05/21 09:52
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><style type="text/css">    *{margin:0;padding:0;}    #box{        width:900px;        margin:0 auto 500px;    }    ul,li{list-style:none;}    .float-location{height:50px;}    .banner{        height:200px;        background-color:lightgrey;        text-align:center;        line-height:200px;    }    .float-location-tab li {        float: left;        width: 20%;        text-align: center;        height: 50px;        line-height: 50px;        background-color: #bca080;        font-size: 20px;        color: #fff;        font-family: "Microsoft YaHei";    }    .title{        text-align:center;        width:100%;        height:50px;        line-height:50px;    }    .bg{        height:500px;        width:100%;    }    .bg1{        background-color:blue;    }    .bg2{        background-color:red;    }    .bg3{        background-color:beige;    }    .bg4{        background-color:aquamarine;    }    .bg5{        background-color:silver;    }    .float-location-tab li.active{        background-color: #ff2b53;        position: relative;    }    .fixed{        position: fixed;        width: 100%;        max-width: 900px;        top: 0;        z-index: 2;    }    .clear:after, .clear:before{        content: "";        display: table;    }    *:before, *:after{        -webkit-box-sizing: border-box;        -moz-box-sizing: border-box;        box-sizing: border-box;    }</style><body><div id="box">    <div class="banner">banner</div>    <div class="prods_wrapper">        <div class="float-location">            <ul class="float-location-tab clear" id="float-loaction-tab">                <li class="active">第一层</li>                <li >第二层</li>                <li >第三层</li>                <li >第四层</li>                <li >第五层</li>            </ul>        </div>        <div id="prods-div">            <p class="title">title1</p>            <div class="bg bg1"></div>            <p class="title">title2</p>            <div class="bg bg2"></div>            <p class="title">title3</p>            <div class="bg bg3"></div>            <p class="title">title4</p>            <div class="bg bg4"></div>            <p class="title">title5</p>            <div class="bg bg5"></div>        </div>    </div></div><script type="text/javascript" src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>    <script type="text/javascript">        var locateNav = function (obj) {            if (Object.prototype.toString.call(obj) !== '[object Object]') {                return;            }            var $navWrapper = $(obj.navWrapper),                    $nav = $(obj.nav),                    $navBtn = $nav.find('li'),                    $floors = $(obj.floors),                    $window = $(window),                    len = $floors.length;            if ($navWrapper.size()) {                setTimeout(setNavStatus, 500);                eventHandle();            }            function eventHandle() {                $window.on('scroll', function () {                    setNavStatus();                    setNavBtnStatus();                });                $navBtn.on('click', function () {                    var $this = $(this),                            targetTop = $floors.eq($this.index()).offset().top,                            navHeight = $navWrapper.height();                    setNavBtnClass($this);                    $('html,body').scrollTop(targetTop - navHeight);                });            }            function setNavStatus() {                if ($window.scrollTop() >= $navWrapper.offset().top) {                    $nav.addClass('fixed');                } else {                    $nav.removeClass('fixed');                }            }            function setNavBtnStatus() {                var toTop = $window.scrollTop(),                        navHeight = $navWrapper.height();                for (var i = len; i > 0; i--) {                    if (toTop >= $floors.eq(i - 1).offset().top - navHeight - 8) {                        setNavBtnClass($navBtn.eq(i - 1));                        break;                    } else {                        setNavBtnClass($navBtn.eq(0));                    }                }            }            function setNavBtnClass($target) {                $target.addClass('active').siblings().removeClass('active');            }        };        //传参数        locateNav({            navWrapper: '.float-location',            nav:        '#float-loaction-tab',            floors:     '.title'        })    </script></body></html>
1 0