之前在項目中做過這么個側邊固定導航效果，把它摘下來，總結下。
實現：
1.當頁面滾動到主體部分時，側邊導航固定在瀏覽器的左上方，且在主體部分內滾動時才固定在瀏覽器的左上方，當側邊導航滾動到主體底部時，側邊導航回到最初狀態
2.當頁面滾動到右側內容相應區域時，側邊對應按鈕高亮
2.點擊左側導航按鈕，頁面會滾動到導航對應的內容
圖：
1.結構樣式簡單的說下
側邊導航和右側主體部分分別左右浮動。側邊導航代碼是動態生成的
2.jquery思路
(1).首先側邊導航的個數與右側的主體的標題的個數是相同的，
var subcont_length = $(".subcont").length;//獲取主題標題的個數
(2). 滾動條滾動到一定位置，側邊導航固定在瀏覽器的左上角
判斷條件：最小滾動：側邊導航的.offset().top減去側邊導航固定的top值
最大滾動：父元素的高度+父元素的.offset().top減去側邊導航自身的高度
(3)側邊導航滾動高亮
判斷條件：向下滾動，只要下一區域內容滾到側邊導航底部位置，這一區域對應導航就高亮；向上滾動，只要上一區域內容出現到側邊導航底部位置，這一區域對應導航就高亮
(4)側邊導航點擊導航按鈕，按鈕高亮，網頁滾動到到相應區域
3.附錄（代碼）
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>側邊固定導航效果</title>
<style>
/*輔助代碼*/
body {
font-family: "Microsoft YaHei", 微軟雅黑;
margin:0;
padding:0;
}
a {
font-size: 12px;
color: #333333;
text-decoration: none;
cursor: pointer;
}
i, em {
font-style: normal;
}
ul, ol, li {
list-style: none;
margin: 0;
padding: 0;
}
.product_detail{
width: 1200px;
margin: 0px auto;
overflow:hidden;
}
.xc_main {
width: 1070px;
float: right;
}
.xc_main li:nth-child(4n+1){background: #5DB2FF;height:500px;}
.xc_main li:nth-child(4n+2){background: #FB6E52;height:500px;}
.xc_main li:nth-child(4n+3){background: #E75B8D;height:500px;}
.xc_main li:nth-child(4n+4){background: #A0D468;height:500px;}
/*側邊導航*/
.leftsidebar {
float: left;
width: 100px;
z-index: 99;
}
.leftsidebar li {
width: 70px;
text-align: center;
background: #e5e5e5;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
height: 30px;
line-height: 30px;
margin-bottom: 5px;
position: relative;
}
.leftsidebar li:hover, .leftsidebar li.on ,.leftsidebar li:hover a, .leftsidebar li.on a{
background: #0099d9;
color: #FFF;
}
.leftsidebar li a {
display: inline-block;
width: 70px;
font-size: 14px;
color: #999;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.icon_tag {
display: inline-block;
vertical-align: middle;
background-image: url(icon-product.png);
}
.leftsidebar .arrow-right{
background-position:-734px -167px;
display: none;
height: 12px;
width: 10px;
margin-top: -6px;
position: absolute;
right: -10px;
top: 50%;
}
.leftsidebar li.on .arrow-right {
display: block;
}
.sub_fixed{
position:fixed;
}
</style>
</head>
<body>
<div class="product_detail">
<h2>行程介紹</h2>
<ul class="xc_main">
<li>第1天</li>
<li>第2天</li>
<li>第3天</li>
<li>第4天</li>
<li>第5天</li>
<li>第6天</li>
</ul>
</div>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
function sidebarlight(obj,top) { //obj為右側內容父元素的class或id,top為側邊導航處於position：relative時top的取值
var subcont_length = $(obj).children("li").length;//獲取主題標題的個數
//js動態添加側邊導航代碼
var start = '<div class="leftsidebar"><ul>',
content = '',
end = '</ul></div>';
for(var i = 0; i <= subcont_length-1; i++){
var n=i+1;
content += '<li>' + '<a href="javascript:;">' +'<em>' +"第"+ n +"天"+'</em>' +'<i class="arrow-right icon_tag"></i>' + '</a>' + '</li>';
}
$(obj).before(start + content + end);
//滾動條滾動到一定位置，側邊導航固定在瀏覽器的左上20px，且側邊導航滾動高亮
var subT = $(".leftsidebar").offset().top;
var subH= $(".leftsidebar").height();
var objH=$(obj).height();
var objT=$(obj).offset().top;
var subliH= $(".leftsidebar li").eq(0).outerHeight(true);
$(window).scroll(function(){
var scroH = $(this).scrollTop();
if(scroH>=subT-parseInt(top)&&scroH<=parseInt(objH)+objT-subH){
$(".leftsidebar").addClass("sub_fixed");
$(".sub_fixed").css("top",top);
}
else if(scroH<subT-parseInt(top)){
$(".leftsidebar").removeClass("sub_fixed");
}
else if (scroH >parseInt(objH)+objT-subH) {
$(".leftsidebar").removeClass("sub_fixed");
}
//側邊導航滾動高亮
for (var i = subcont_length - 1; i >= 0; i--) {
var subtop=$(obj).children("li").eq(i).offset().top;
if ($(window).scrollTop()>= subtop-subliH*(i+1)-parseInt(top)) {
//如果滾動條滾動的距離大於等於右側的內容區域的.offset().top
//減去側邊導航的高度再減去側邊導航固定的top值，對應導航按鈕高亮
$(".leftsidebar li").removeAttr("class");
$(".leftsidebar li").eq(i).attr("class", "on");
break;
}
}
})
//側邊導航點擊導航按鈕，按鈕高亮，網頁滾動到到相應區域
$(".leftsidebar li").on("click", function() {
var index = $(this).index();//判斷點擊的選項是第幾個
a = $(obj).children("li").eq(index);//對應第幾個內容對象
b= a.offset().top;
$(this).addClass("on").siblings().removeClass("on");
$("body,html").animate({scrollTop:b-subliH*index-parseInt(top)},400);
})
$(".leftsidebar li").eq(0).attr("class", "on");
}
sidebarlight(".xc_main","20px");
</script>
</body>
</html>
備注：想在把代碼改進下，設置側邊導航的內容設置為主體內容區域的標題內容，大致有這么個思路：把內容部分對應的.offset().top和標題內容push到數組中，for循環時去取數組中的值，現在就先這樣吧。
本文為原創，如需轉載請注明轉載地址，謝謝合作！
本文地址：http://www.cnblogs.com/wanghuih/p/6504360.html