分享一个快捷导航的代码

发布于2017-02-25  3,072次阅读



var quick = {
init : function(){
var othis = this;
this.bind_dd_click();
$(window).scroll(function(){
othis.bind_rolling();// 绑定滚动一个像素调用一次
});
},
bind_dd_click : function(){
var othis = this;
jQuery('.quick dl dd').bind('click',function(){
var _index = $(this).index();//获取当前的位置
$(this).addClass('current').siblings().removeClass('current');
var obj = jQuery('.quick_0'+_index);
if(obj.length > 0){//判断是否存在
var _top = obj.position().top;
$("html,body").animate({scrollTop: _top}, 500);  //滚动
}
});
},
bind_rolling : function(){
if(!this.tmp){
this.tmp = new Array();
this.qhig = $(".quick").height()/2;
this.qtop = $(".quick_01").position().top;//获取第一个quick_相对父元素的顶部位置的距离
var dd_leng = $('.quick dd').length;
for( var i=1;ithis.tmp[1] ){
$(".quick dd:eq(1)").addClass("current").siblings().removeClass("current")
}else if( this.btopthis.tmp[2] ){
$(".quick dd:eq(2)").addClass("current").siblings().removeClass("current")
}else if( this.btopthis.tmp[3] ){
$(".quick dd:eq(3)").addClass("current").siblings().removeClass("current")
}else if( this.btopthis.tmp[4] ){
$(".quick dd:eq(4)").addClass("current").siblings().removeClass("current")
}else if( this.btopthis.tmp[5] ){
$(".quick dd:eq(5)").addClass("current").siblings().removeClass("current")
}else if( this.btop>this.tmp[6] ){
$(".quick dd:eq(6)").addClass("current").siblings().removeClass("current")
};

}
}

$(document).ready(function(){
quick.init();
});

思路:
1.点击滚动:点击后获取到相应div相对于父元素top的距离,然后在滚动到该位置
2.滚动切换:绑定滚动事件,获取所有div相对于父元素top的位置,获取每次滚动后的top距离!然后再跟div相对的父top的位置做比较

代码已经上到百度网盘链接: https://pan.baidu.com/s/1nvTrgIP 密码: magy


  • 微信或支付宝

道,可道,非常道;名,可名,非常名。