jQuery滚动条楼层

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

首先引用文件

<script src="jquery.min.js"></script>

// 滚动条事件// 当前滚动条的高度// 滚动条上放的高度// 获取当前的背景块定位// 获取目标位置的高度// 当前滚动条的高度// 获取目标的位置

var bd_height = new Array();
	// 记忆变量
	var old_key = 0;
	/*加载完成执行*/
	$(function(){
		$('#building .floor').each(function(){
			bd_height[$(this).index()] = $(this).offset().top;
		})
		// 滚动条事件
		$(window).scroll(function(){
			// 当前滚动条的高度
			var sl_this = $(this).height();
			// 滚动条上放的高度
			var sl_top = $(this).scrollTop();
			// 出现的高度
			var show_ht = sl_top+sl_this/2;
			// 获取楼层的层数，0层开始
			var key = 0;

			// 此处可以根据自己的情况进行更改
			// for，each，for in都可以 建议改为for循环
			// console.log(bd_height);
			bd_height.map(function(value,index){
				// 阶梯判断[这一步很重要]	
				if(show_ht >= value){
						key = index;
				}
			})
			// 修改楼梯的样式
			if(old_key == key){
				return false;
			}else{
				old_key = key;
				// 调起修改样式函数
				change_step(key);
			}
		})
	})
	/*修改楼梯的函数*/
	function change_step(key){
		// 获取当前的背景块定位
		var bg_color = $('#step .bg_color');
		var old_top = bg_color.position().top;
		// 获取目标位置的高度
		var ul_ftop = $('#step .box').offset().top;
		var li_ftop = $('#step .box li').eq(key).offset().top;

		var target_top = li_ftop-ul_ftop;
		// 开启动画
		bg_color.animate({top:target_top}, 'fast');
	}
	/*修改建筑的函数*/
	function change_building(key){
		// 当前滚动条的高度
		var sl_this = $(window).height();
		// 获取目标的位置
		var target = $('#building .floor').eq(key).offset().top;
		target -= sl_this/2-1;
		// 开启动画
		$('body').animate({scrollTop:target});
	}
	/*点击跳转到楼层*/
	$('#step .box li').click(function(){
		var key = $(this).index();
		// 跳转建筑
		change_building(key);
	})