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

最新推荐文章于 2022-01-08 20:45:58 发布
原创最新推荐文章于 2022-01-08 20:45:58 发布 · 2.1k 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#手机端浮动楼层
javascript 专栏收录该内容
23 篇文章
订阅专栏
<!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>