しかもコピペでうごくやーん


    <style>


        #header,
        #footer {
            position: absolute;
            width: 100%;
        }


        #wrapper {
            position: absolute;
            height: 40px;
            z-index: 1;
            top: 30px;
            left: 0;
            width: 100%;
            overflow: hidden;
        }

        #main {
            position: absolute;
            z-index: 1;
            top: 70px;
            left: 0;
            width: 100%;
            overflow: hidden;
        }
        #wrapper ul {
            height: 100%; /* メニューの数に応じて 変更 */




        }

        #scroller {
            position: absolute;
            z-index: 1;
            width: 3000px;
            height: 20px;
        }
        #footer {
            bottom: 0;
        }

    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.js"></script>
    <script>
        var myScroll;

 window.onload = function() {
            myScroll = new IScroll('#wrapper', {
                scrollX: true,
                scrollY: false,
                mouseWheel: true,
                click: true
            });
        };
    </script>

<div id="header">
    ここにメニューを固定
</div>
<div id="wrapper">
    <ul id="scroller" class="nav nav-tabs">
        <li class="active"><a href="#home" data-toggle="tab">タブメニュー１</a></li>
        <li><a href="#profile" data-toggle="tab">タブメニュー２</a></li>
        <li><a href="#profile" data-toggle="tab">タブメニュー２</a></li>
        <li><a href="#profile" data-toggle="tab">タブメニュー２</a></li>
        <li><a href="#profile" data-toggle="tab">タブメニュー２</a></li>
        <li><a href="#profile" data-toggle="tab">タブメニュー２</a></li>
        <li><a href="#profile" data-toggle="tab">タブメニュー２</a></li>
        <li><a href="#profile" data-toggle="tab">タブメニュー２</a></li>
        <li><a href="#profile" data-toggle="tab">タブメニュー２</a></li>
        <li><a href="#profile" data-toggle="tab">タブメニュー２</a></li>
        <li><a href="#profile" data-toggle="tab">タブメニュー２</a></li>
        <li><a href="#profile" data-toggle="tab">タブメニュー２</a></li>
        <li><a href="#profile" data-toggle="tab">タブメニュー２</a></li>
        <li><a href="#profile" data-toggle="tab">タブメニュー２</a></li>
        <li><a href="#profile" data-toggle="tab">タブメニュー２</a></li>
        <li><a href="#profile" data-toggle="tab">タブメニュー２</a></li>
        <li><a href="#profile" data-toggle="tab">タブメニュー２</a></li>
        <li><a href="#profile" data-toggle="tab">タブメニュー２</a></li>
        <li><a href="#last" data-toggle="tab">ラスト</a></li>



    </ul>
</div>

    <div id="main">
        <div class="tab-content">
            <div class="tab-pane active" id="home">

                PCの場合はマウスでスワイプできるやん<br>
                スマホの場合はフィンガーでスワイプできるやん<br>
                すてきやん<br>

            </div>
            <div class="tab-pane" id="profile">いいいいいいいいいい</div>
            <div class="tab-pane" id="last">ううううううううううう</div>
        </div>
    </div>

<div id="footer">
    これがフッター
</div>