页面滚动时，右侧导航栏跟着对应滚动
方法一：
导航栏对应跳转*{ 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 { background:pink; }
var cimi = {
//初始执行一次
init: function () {
();
},
navBar: function(){
var pos=[],
$page = $('.part'),
$nav = $(".tz-box a");
for(var i=0;i
pos[i] = $(i).offset().top;
}
$(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)){
$(i).addClass("on").siblings().removeClass("on");
}
}
}).trigger("scroll");
},
};
();
方法二：
导航栏对应跳转*{ 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 { background:pink; }
$(function() {
// 初始化侧导航
function initSidebar() {
var _screenWidth = ;
if (_screenWidth > 1340 && _screenWidth <= 1500) {
// 缩小并显示导航
$('.sidebar').addClass('small');
}
$(window).scroll(function(){
var sTop= || ;
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 = $();
$target = $ && $target || $('[name=' + (1) + ']');
if ($) {
var targetOffset = $().top;
$('html, body').stop().animate({
scrollTop: targetOffset
}, 600);
return false;
}
}
});
})
作者：seeyes