本人菜鸟一枚，最近遇到这样一个问题，着实头疼，希望有大神能够帮忙，为移动端页面。

问题如下：

导航栏固定在顶部，总共有6个分裂，分别对应6块内容（各内容高度不一），点击对应的菜单，页面显示相对应内容

内容可左右可滑动，并且滑动内容时，对应的菜单跟随变化

内容可向上滑动，当一个分类菜单内容浏览完毕后，继续向上滑动，切换到下一个菜单内容，无限循环下去（没有向下滑动切换上一个的效果，只有向上滑动切换到下一个的效果）

比较菜，一开始自己写了一个tab选项卡切换的那种，后来看到网上有大神用swiper插件比较容易解决，就应用了，确实可以，但是现在还有第三个问题，真的智商捉急，还望有能解决问题的大神能帮忙，小弟不胜感激，大神可以不用按照我的思路来解决问题，就是说可以不用插件，只要能解决问题，随便怎么整都行，谢谢啦！

（贴的html没有引入swiper.css和swiper.js以及jquery）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="stylesheet" type="text/css" href="css/swiper.css"/>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/swiper.min.js"></script>
    <style type="text/css">
        /*menu*/
        .menu {width: 100%;height: 30px;overflow: hidden;position: fixed;min-width: 320px;max-width: 960px;margin:0 auto;z-index: 999;}
        .menu li{width:17%;color:#333;float: left;font-size: 16px;height: 30px;line-height: 30px;text-align: center;background-color: #C0C0C0;}
        .menu li.selected{color:#800040;font-weight: bold;text-decoration: underline;}
        .menu li:nth-child(2){width: 15%;}
        /*content*/
        .content {margin-top: 30px;}
        .content section{width:100%;height: 800px;overflow: hidden;text-align: center;font-size: 36px;color:#333;}
    </style>
</head>
<body>
    <div class="wrap">
        <div id="menu" class="menu">
            <ul class="clearfix">
                <li class="selected">内容1</li>
                <li>内容2</li>
                <li>内容3</li>
                <li>内容4</li>
                <li>内容5</li>
                <li>内容6</li>
            </ul>
        </div>
        <div id="content" class="content swiper-container">
            <div class="swiper-wrapper">
                <section style="background-color:#408080;height:2000px;" class="swiper-slide">内容1内容1内容1内容1内容1内容1内容1</section>
                <section style="background-color:#CFD2D6;height:1600px;" class="swiper-slide">内容2内容2内容2内容2内容2内容2内容2</section>
                <section style="background-color:#8080C0;height:1200px;" class="swiper-slide">内容3内容3内容3内容3内容3内容3内容3</section>
                <section style="background-color:#804040;height:2400px;" class="swiper-slide">内容4内容4内容4内容4内容4内容4内容4</section>
                <section style="background-color:#800000;height:1200px;" class="swiper-slide">内容5内容5内容5内容5内容5内容5内容5</section>
                <section style="background-color:#804000;height:2400px;" class="swiper-slide">内容6内容6内容6内容6内容6内容6内容6</section>
            </div>
        </div>
    </div>
    <script>
        $(function(){
            var oMenu = document.getElementById('menu');
            var oContent = document.getElementById('content');
            var aLis = oMenu.getElementsByTagName('li');
            var aSections = oContent.getElementsByTagName('section');
            var mySwiper = new Swiper('.swiper-container', {
                onTransitionStart: function(swiper){
                    $('li').eq(mySwiper.activeIndex).addClass('selected').siblings().removeClass('selected');
                }
            });
            for(var i = 0;i<aLis.length;i++){
                aLis[i].index = i;
                aLis[i].onclick = function(){for(var j = 0;j<aLis.length;j++){
                        aLis[j].className = '';

                    }
                    this.className = 'selected';
                    mySwiper.slideTo(this.index, 500);
                }
            };
    </script>
</body>
</html>