html导航栏跟随页面滚动,页面滚动时，右侧导航栏跟着对应滚动

页面滚动时，右侧导航栏跟着对应滚动

方法一：

导航栏对应跳转

*{ margin:0px; padding:0px; text-align:center; color:#fff; font-size:20px;}

.part1{height:544px; background:#f44336;}

.part2{height:655px; background:#ff9800;}

.part3{height:557px; background:#ffeb3b;}

.part4{height:677px; background:#8bc34a;}

.part5{height:577px; background:#03a9f4;}

.part6{height:1098px; background:#3f51b5;}

.part7{height:821px; background:#673ab7;}

.sidebar {display: none; position: fixed; top:50%; right: 60px; z-index: 100; width:100px; height:416px; margin-top:-208px; overflow: hidden;}

.on{ display:block; }

.sidebar a{ width:100px; height:30px; line-height:30px; background:red; color:#fff; display:block; font-size:14px;}

.sidebar a.on{ background:pink; }

111111111111111111111111111111111111111111

222222222222222222222222222222222222222222

333333333333333333333333333333333333333333

4444444444444

55555555555

66666666

7777777777777777777777777

1111

2222

3333

4444

5555

6666

7777

TOP

var cimi = {

//初始执行一次

init: function () {

cimi.navBar();

},

navBar: function(){

var pos=[],

$page = $('.part'),

$nav = $(".tz-box a");

for(var i=0;i

pos[i] = $page.eq(i).offset().top;

}

$nav.click(function () {

var index = $(this).index(),

scrolltop = 0;

scrolltop = pos[index];

$("html,body").stop().animate({

scrollTop: scrolltop

}, 500);

});

$('#top').click(function () {

scrolltop = 0;

$("html,body").stop().animate({

scrollTop: scrolltop

}, 500);

});

$(window).scroll(function(){

var top = $(document).scrollTop();

if(top >= 300){

$('.sidebar').addClass("on");

}else{

$('.sidebar').removeClass("on");

}

for(var i=0;i

if(top > (pos[i] - 10)){

$nav.eq(i).addClass("on").siblings().removeClass("on");

}

}

}).trigger("scroll");

},

};

cimi.init();

方法二：

导航栏对应跳转

*{ margin:0px; padding:0px; text-align:center; color:#fff; font-size:20px;}

.part1{height:544px; background:#f44336;}

.part2{height:655px; background:#ff9800;}

.part3{height:557px; background:#ffeb3b;}

.part4{height:677px; background:#8bc34a;}

.part5{height:577px; background:#03a9f4;}

.part6{height:1098px; background:#3f51b5;}

.part7{height:821px; background:#673ab7;}

.part8{height:821px; background:#ff5722;}

.sidebar {display: none; position: fixed; top:50%; right: 60px; z-index: 100; width:100px; height:416px; margin-top:-208px; overflow: hidden;}

.sidebar a{ width:100px; height:30px; line-height:30px; background:#cddc39; color:#fff; display:block; font-size:14px;}

.sidebar a.current{ background:pink; }

111111111111111111111111111111111111111111

222222222222222222222222222222222222222222

333333333333333333333333333333333333333333

4444444444444

55555555555

66666666

7777777777777777777777777

889888888888888

22222

333333

4444

5555

66666

777777

TOP

$(function() {

// 初始化侧导航

function initSidebar() {

var _screenWidth = window.innerWidth;

if (_screenWidth > 1340 && _screenWidth <= 1500) {

// 缩小并显示导航

$('.sidebar').addClass('small');

}

$(window).scroll(function(){

var sTop=document.documentElement.scrollTop || document.body.scrollTop;

if(sTop<130){

$('.sidebar').fadeOut();

}else{

$('.sidebar').fadeIn();

}

if ( sTop >= 544 && sTop < 1199) {

cc(0);

}

if (sTop >= 1199 && sTop < 1756) {

cc(1);

}

if (sTop >= 1756 && sTop < 2433 ) {

cc(2);

}

if (sTop >= 2433 && sTop < 3010 ) {

cc(3);

}

if (sTop >= 3010 && sTop < 4108 ) {

cc(4);

}

if ( sTop >=4108 ) {

cc(5);

}

});

function cc(nums){

$(".sidebar-inner a").eq(nums).addClass('current').siblings().removeClass('current');

}

}

initSidebar();

// 点击侧导航

$('.sidebar,.htext').on('click', 'a', function() {

var $el = $(this);

if (($el).hasClass('to-top')) {

$('html, body').stop().animate({scrollTop: 0}, 600);

} else {

var $target = $(this.hash);

$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');

if ($target.length) {

var targetOffset = $target.offset().top;

$('html, body').stop().animate({

scrollTop: targetOffset

}, 600);

return false;

}

}

});

})

作者：seeyes