找工做首頁右側漂浮導航

============================================================找工做首頁右側漂浮導航

//左邊容器
<div id="indContainer" class="container">
<div class="indOne">

</div>

<div class="indOne">

</div>

<div class="indOne">


</div>

<div class="indOne">

</div>

<div class="indOne">

</div>

<div class="indOne">

</div>
<div class="indOne">


</div>

<div class="indOne">

</div>

<div class="indOne">

</div>

<div class="indOne">

</div>
</div>

 

//右漂浮導航
<div id="recruitmentNavigation" class="recruitmentNavigation industryNavigation">
<ul class="industryNavigationUL" id="industryNavigationUL_ind">
<li class="current"><a href="javascript:;"><i class="icon-computer"></i>計算機/互聯網/通訊/電子</a></li>
<li><a href="javascript:;"><i class="icon-money"></i>金融/銀行/保險</a></li>
<li><a href="javascript:;"><i class="icon-building2"></i>建築/房地產/物業管理</a></li>
<li><a href="javascript:;"><i class="icon-customService"></i>商業服務</a></li>
<li><a href="javascript:;"><i class="icon-moneyInHand"></i>貿易/消費(食品/服裝/傢俱等)/家用電器</a></li>
<li><a href="javascript:;"><i class="icon-tv"></i>廣告/媒體/文化</a></li>
<li><a href="javascript:;"><i class="icon-setting"></i>製造/加工/汽車</a></li>
<li><a href="javascript:;"><i class="icon-truck"></i>交通/運輸/物流/倉儲/郵政</a></li>
<li><a href="javascript:;"><i class="icon-waiter"></i>服務業</a></li>
<li><a href="javascript:;"><i class="icon-battery"></i>能源/原材料</a></li>
<li><a href="javascript:;"><i class="icon-medicalBox"></i>醫藥/醫療</a></li>
<li><a href="javascript:;"><i class="icon-building3"></i>衛生/教育/培訓/科研/非贏利機構</a></li>
<li><a href="javascript:;"><i class="icon-agriculture"></i>農/林/牧/漁</a></li>

</ul>
</div>

 

//default首頁右側漂浮導航
function recruitmentNavEvent(navID, boxID) {
var $nav = $("#" + navID);
var $navLi = $("#" + navID + " li");
var $box = $("#" + boxID + " .indOne");
var ary = [];
var verticalHeight =0;//box滾到屏幕垂直的中間，距離屏幕頂端的高度

$("#" + navID + " li").eq(0).addClass("current");
for (var i = 0; i < $box.size() ; i++) {
verticalHeight = $(window).height() / 2 - $box.eq(i).height() / 2-200;//有時候會出現第一個點擊不了的狀況，因此再-200
ary.push(parseInt($box.eq(i).position().top - verticalHeight));
}

$(window).scroll(function () {
for (var i = 0; i < ary.length; i++) {
if ($(window).scrollTop() <= ary[i]) {
$navLi.removeClass("current");
$navLi.eq(i).addClass("current");
break;
}
}
});

//點擊跳轉位置
$nav.find("a").click(function () {
var $this = $(this);
var navIndex = $this.parent().index();
scrollTo(0, ary[navIndex]);
});
}

recruitmentNavEvent("industryNavigationUL_ind", "indContainer");
recruitmentNavEvent("industryNavigationUL_pos", "posContainer");