找工作首页右侧漂浮导航

============================================================找工作首页右侧漂浮导航


//左边容器
<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");

猜你喜欢

转载自www.cnblogs.com/sunnywindycloudy/p/11646486.html
今日推荐