使用本案例需要引入jquery.js & jquery.mousewheel.js 插件
本案例爲了方便讀者查看效果，直接把css, js寫在html中，實際作業可分離開來。
效果示例： 
以下爲完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-family: "Microsoft Yahei";
vertical-align: baseline;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
del {
text-decoration: line-through;
}
abbr[title],
dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
input,
select {
vertical-align: middle;
}
ul {
list-style: none;
}
html,
body {
width: 100%;
height: 100%;
}
.head {
width: 100%;
height: 120px;
background-color: #1F1F1F;
text-align: center;
line-height: 120px;
position: fixed;
top: 0;
left: 0;
color: hsla(0, 0%, 89%, 1.00);
}
.nave {
width: 260px;
background: #eee;
position: fixed;
left: 0;
top: 120px;
}
.nave ul {
width: 100%;
height: 100%;
}
.nave ul li {
width: 100%;
text-align: center;
cursor: pointer;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
}
.nave ul li:nth-child(even) {
background: #fff;
}
.nave ul li:nth-child(1).current {
background: #fa2828;
}
.nave ul li:nth-child(2).current {
background: #333645;
}
.nave ul li:nth-child(3).current {
background: #76d241;
}
.nave ul li:nth-child(4).current {
background: #3bb600;
}
.nave ul li:nth-child(5).current {
background: #ff4326;
}
.nave ul li:nth-child(6).current {
background: #3766b4;
}
.nave ul li:nth-child(7).current {
background: #4b96e7;
}
.main_box {
width: 100%;
height: 100%;
background: pink;
padding: 120px 0 0 260px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
.main_box>div {
width: 100%;
}
.page1 {
background: #f43737;
}
.page2 {
background: #474a57;
}
.page3 {
background: #e4af05;
}
.page4 {
background: #7cd454;
}
.page5 {
background: #3db416;
}
.page6 {
background: #4472bb;
}
.page7 {
background: #4993e6;
}
.fotter {
width: 100%;
height: 200px;
background: pink;
}
</style>
</head>
<body>
<div class="head">
頭部導航-滾動頁面會自動定位
</div>
<div class="nave" style="height: 804px;">
<ul>
<li class="" style="line-height: 114.857px; height: 114.857px;">菜單1</li>
<li class="current" style="line-height: 114.857px; height: 114.857px;">菜單2</li>
<li class="" style="line-height: 114.857px; height: 114.857px;">菜單3</li>
<li class="" style="line-height: 114.857px; height: 114.857px;">菜單4</li>
<li class="" style="line-height: 114.857px; height: 114.857px;">菜單5</li>
<li class="" style="line-height: 114.857px; height: 114.857px;">菜單6</li>
<li class="" style="line-height: 114.857px; height: 114.857px;">菜單7</li>
</ul>
</div>
<div class="main_box">
<div class="page1" style="height: 804px;">內容1</div>
<div class="page2" style="height: 804px;">內容2</div>
<div class="page3" style="height: 804px;">內容3</div>
<div class="page4" style="height: 804px;">內容4</div>
<div class="page5" style="height: 804px;">內容5</div>
<div class="page6" style="height: 804px;">內容6</div>
<div class="page7" style="height: 804px;">內容7</div>
<p class="fotter"></p>
</div>
<script src="jquery.min.js"></script>
<script src="jquery.mousewheel.min.js"></script>
<script>
'use strict';
var $key=0;//記錄滾動到哪一個
var canscroll = true;//用來限制滾動頻率
jQuery(document).ready(function($) {
change_size();
$(window).on('resize', function(event) {
event.preventDefault();
change_size();
});
/***滾動鼠標**/
$(document).mousewheel(function(event,delta){
if (canscroll) {
//限制滾動
canscroll = false;
$key-=delta;
if($key<0)
{
$key=0
}else if($key > 6)
{
$key=7;
canscroll = true;
return;
}
console.log($key);
//滾動頁面
$("body,html").stop().animate({
"scrollTop":$(".main_box>div").eq($key).offset().top-120
},700,function(){
//釋放滾動條
canscroll = true;
});
//添加菜單當前色
$(".nave ul li").eq($key).addClass('current').siblings().removeClass('current');
};
})
/*****點擊側邊菜單***/
$(".nave ul li").click(function(event) {
$key = $(this).index();
$(".nave ul li").eq($(this).index()).addClass('current').siblings().removeClass('current');
$("body,html").stop().animate({
"scrollTop":$(".main_box>div").eq($(this).index()).offset().top-120
},700);
});
});
//動態設置大小
function change_size(){
var window_height = $(window).height();
$(".nave").height(window_height - 120);
var size = Number($(".nave ul li").size());
$(".nave ul li").css({'line-height':$(".nave").height()/size+"px",'height':$(".nave").height()/size+"px"});
$(".main_box>div").height(window_height - 120);
$("body,html").stop().animate({
"scrollTop":$(".main_box>div").eq($key).offset().top-120
},700,function(){
//釋放滾動條
canscroll = true;
});
//添加菜單當前色
$(".nave ul li").eq($key).addClass('current').siblings().removeClass('current');
}
</script>
</body>
</html>