しかもコピペでうごくやーん
<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">タブメニュー1</a></li>
<li><a href="#profile" data-toggle="tab">タブメニュー2</a></li>
<li><a href="#profile" data-toggle="tab">タブメニュー2</a></li>
<li><a href="#profile" data-toggle="tab">タブメニュー2</a></li>
<li><a href="#profile" data-toggle="tab">タブメニュー2</a></li>
<li><a href="#profile" data-toggle="tab">タブメニュー2</a></li>
<li><a href="#profile" data-toggle="tab">タブメニュー2</a></li>
<li><a href="#profile" data-toggle="tab">タブメニュー2</a></li>
<li><a href="#profile" data-toggle="tab">タブメニュー2</a></li>
<li><a href="#profile" data-toggle="tab">タブメニュー2</a></li>
<li><a href="#profile" data-toggle="tab">タブメニュー2</a></li>
<li><a href="#profile" data-toggle="tab">タブメニュー2</a></li>
<li><a href="#profile" data-toggle="tab">タブメニュー2</a></li>
<li><a href="#profile" data-toggle="tab">タブメニュー2</a></li>
<li><a href="#profile" data-toggle="tab">タブメニュー2</a></li>
<li><a href="#profile" data-toggle="tab">タブメニュー2</a></li>
<li><a href="#profile" data-toggle="tab">タブメニュー2</a></li>
<li><a href="#profile" data-toggle="tab">タブメニュー2</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>