近来赶项目,天昏地暗,水深火热的。遇到细节问题还真是头疼不已。

页面需要一个右侧的楼层导航,样子和阿里巴巴的右边差不多。具体自己可以看一看。

css

 

这里整理一下思路代码,有用到的拿去便是。

一开始以为挺简单的,找个jquery插件就能搞定,于是找了个coolcat类似的样子描描画画,分分钟也有几分眉目了,正沉浸于自我炫耀得瑟的情绪中,

悲剧发生了,在 Chrome 和 firefox 下 大范围的跳转会有楼层定位不准确的情况,我去,婶婶也去!

无奈只能自己动手丰衣足食,浪费宝贵的半天时间。因为是比较初的版本,适合有一定技术,有耐心,不骂娘的人看,口水珍贵多包涵。

主要jS代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
jQuery(document).ready(function($) {
	var f1 = $('.slide[data-slide="1"]').offset().top;
	var fs = $('.navigation').children().size();
	var fss = new Array();
	for (i = 0; i < fs; i++) {
		j = i + 1;
		fss[i] = $('.slide[data-slide="' + j + '"]').offset().top;
	}
 
	//if($(window).scrollTop()==0){
	//	changefl(1);
	//}
 
 
	$(window).scroll(function(){
		var currentTOP = $(window).scrollTop();
		if(currentTOP>f1-30){
			$("#skipfloor").show();
		}else{
			$("#skipfloor").hide();
		}
		if (currentTOP <= f1) {
			$('.navigation a').removeClass('sel');
			$('.navigation a[data-slide="1"]').addClass('sel');
			return;
		}else{
			changefl(getFloor(currentTOP));
		}
	});
 
 
	function getFloor(fh){
		if(fs==0||fh<=f1){
			return 1;
		}
		if(fh>=fss[fs-1]){
			return fs;
		}
		for (k=0; k<fs;k++) {
			if(fh>fss[k]&&fh<fss[k+1]){
				return k+1;
			}
		}
	}
 
	function changefl(fno){
		$('.navigation a').removeClass('sel');
		$('.navigation a[data-slide="'+fno+'"]').addClass('sel');
	}
 
});
 
function gotop() {
	$('body,html').animate({
		scrollTop : 0
	}, 800);
}
function gotofloor(thiz) {
	$("a[class='sel']").attr('class', '');
	$(thiz).attr("class", "sel");
	dataslide = $(thiz).attr('data-slide');
	var pos = $('.slide[data-slide="' + dataslide + '"]').offset().top;// 获取该点到头部的距离
	$("html,body").animate({
		scrollTop : pos
	}, 800);
}

效果:
css1

 

 

=======2014 06 06 更新 =============

询问的人实在太多,不管是处于什么目的,还是简单抽空弄了一个简陋版,拿去用吧,大家斟酌口水,谢谢。

链接: http://pan.baidu.com/s/1pJwizl5 密码: tbqb