原型圖
在線地址
http://js.jirengu.com/neliz
代碼
HTML:
<div class="pageContentScan_box">
<span>菜單1</span>
<span>菜單2</span>
<span>菜單3</span>
</div>
<section class="needScanPosition">內(nèi)容1</section>
<section class="needScanPosition">內(nèi)容2</section>
<section class="needScanPosition">內(nèi)容3</section>
// needScanPosition 就是跳轉(zhuǎn)的項(xiàng)目
JS：
(function ($) {
var tab_t = {
width: $('.pageContentScan_box').get(0).offsetWidth,
height: $('.pageContentScan_box').get(0).offsetHeight,
topDistance: $('.pageContentScan_box').get(0).offsetTop
};
var tab_c_topDistanceArray = [];
$('.needScanPosition').each(function (e) {
var distance = $('.needScanPosition').eq(e).get(0).offsetTop;
tab_c_topDistanceArray.push(distance);
});
function judgeScroll() {
var winScroll = $(window).scrollTop();
if (winScroll > tab_t.topDistance) {
$('.pageContentScan_box').addClass('fixTop');
for (var i = 0; i < tab_c_topDistanceArray.length; i++) {
if (winScroll >= (tab_c_topDistanceArray[i] - tab_t.height)) {
$('.pageContentScan_box span').removeClass('current').eq(i).addClass('current');
console.log(i);
}
}
} else {
$('.pageContentScan_box span').removeClass('current')
// .eq(0).addClass('current');
$('.pageContentScan_box').removeClass('fixTop');
}
}
judgeScroll();
$(window).scroll(function () {
judgeScroll();
});
$('.pageContentScan_box span').click(function (e) {
var ele = e.target;
var eleIndex = $(ele).index();
$(window).scrollTop(tab_c_topDistanceArray[eleIndex] - tab_t.height);
});
})(jQuery);
