jquery编写侧边导航栏

最新推荐文章于 2022-01-17 16:44:43 发布

了缺

最新推荐文章于 2022-01-17 16:44:43 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery插件

本文链接：https://blog.youkuaiyun.com/LiaoQuesg/article/details/41966041

jquery插件专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个基于jQuery的自定义滚动条插件，该插件能够实现平滑滚动和左侧导航同步的效果。适用于火狐和IE10及以上版本浏览器，并提供了详细的代码示例和注释。

以前帮朋友做的一个样式,今天重新封装了下,发出来共享下

注意几点:

1.请使用1.7以上版本jquery,低版本的有没有问题我不晓得

2.我做的是基本的页面结构,直接复制代码,可以看下效果

3.主要的代码我基本上都注释了,以便于大家修改

4.在火狐和ie10以上的浏览器中,offset().top是可以精确到小数位的,但是scrollTop(100.5)却只能滚动到100px.所以切记要定义.cc1的高度,高度可以不同,但是必须定义

<script  src="jquery-1.7.1.min.js"></script>
<body>
<div class='c1'>
	<div class = 'cc1' style="height:500px">1</div>
	<div class = 'cc1' style="height:500px">2</div>
	<div class = 'cc1' style="height:500px">3</div>
	<div class = 'cc1' style="height:500px">4</div>
	<div class = 'cc1' style="height:500px">5</div>
	<div class = 'cc1' style="height:300px">6</div>
</div>
<div class='c2'>
	<ul class="ulz" > 
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	</ul>

</div>

</body>

<script>

$(function (){
		function ScrollBar(rightContent, leftBar, leftBarLi) {
            this._offsettop = 10; 	//如果需要向下边偏移一些距离可以改变这个
            this._offsetleft = 20; 	//如果需要向左边偏移一些距离可以改变这个
            this._step = 30; 		//步长
            this._sleep = 20;		//timeout延迟
			this.onblock = 0;		//当前索引
            this._timeid = null;	//timeoutid
			this.rightContent = rightContent;	//右侧内容的class
			this.leftBar = leftBar;			//左侧工具条ul的class
			this.leftBarLi = leftBarLi;		//左侧工具条ul li
			this.length  = $(this.leftBarLi).length;		//li长度
			this.unClass = 'unClass';						//默认样式
			this.onClass = 'newClass';						//当前样式
			this.menyClass 	 = false;						//是否开启多个样式 menyClasses用来保存多个样式,注意:如果开启有多少个li就得写多少个样式
			this.menyClasses = ['class1', 'class2', 'class3','class4', 'class5', 'class6'];
			this.targetindex = null;
			this.act = null; 					//u上滚, d下滚
			
            this.init = function () {
                var _this = this;
                //设置广告条左边
                $(_this.leftBar).css('left', $(_this.leftBar).parent().offset().left - $(_this.leftBar).width() - _this._offsetleft);
                //这是广告条右边
                $(_this.leftBar).css('top', $(_this.leftBar).parent().offset().top + _this._offsettop);
				//监听滚动条并设定当前索引及其样式
				$(window).scroll(function () {
					//获取.ulz的父窗口的和窗口文档body的高度偏移
                    var leftBar = $(_this.leftBar).parent().offset().top;
                    //获取滚动条和窗口文档body的高度偏移
                    var STop = $(document).scrollTop();
					//设置左边是否置顶
					if (leftBar <= STop) { $(_this.leftBar).css('top', 0); } else { $(_this.leftBar).css('top', leftBar - STop + _this._offsettop); }
					for (var i = 0; i < $(_this.rightContent).length; i++) {
                        if (
								$(document).scrollTop() >= $(_this.rightContent).eq(i).offset().top && 
								$(document).scrollTop() < $(_this.rightContent).eq(i).offset().top + $(_this.rightContent).eq(i).height()
							) {
								_this.setNowadayCss(i);
								break;
						}else if( _this.is_wheight() ){
							_this.setNowadayCss(_this.length - 1);
							break;
						}
                    }
				})
				
				$(_this.leftBarLi).click(function () {
					//如果连续快速点击,先结束之前的滚动效果
					if (_this._timeid) clearTimeout(_this._timeid);
					//进行滚动
					index = $(this).index();
					_this.act = _this.onblock < index ? 'd' : 'u';
					_this.scrollTop(index);
				})
			}
			
			//是否到底层了
			this.is_wheight = function(){
				return $(document).scrollTop() == $(document.body).outerHeight(true) - $(window).height();
			}
			
			//先清空所有样式,再设置当前的索引样式
			this.setNowadayCss = function (i){
				this.onblock = i;
				if(this.menyClass){
					$(this.leftBarLi).removeClass(this.menyClasses[this.onblock+1]);
					$(this.leftBarLi).removeClass(this.menyClasses[this.onblock-1]);
					$(this.leftBarLi).eq(this.onblock).addClass(this.menyClasses[this.onblock]);
				}else{
					$(this.leftBarLi).removeClass(this.onClass);
					$(this.leftBarLi).eq(this.onblock).addClass(this.onClass);
				}
			}
			
			//滚动到目标索引
			//index目标索引
			this.scrollTop = function (index) {
				var _this = this;
				setTimeout(function () { 
					if( _this.is_wheight() ) _this.setNowadayCss(_this.length-1); 
					//滚动到对应index的头部就停止
					if( _this.onblock == index ) return ;
					//获得当前索引的下一个索引的top偏移
					var _top = $(_this.rightContent).eq( _this.act == 'u' ?  (_this.onblock - 1 < 0 ? 0 : _this.onblock - 1) : (_this.act == 'd' ? _this.onblock + 1 : null)).offset().top;
					_this.scrollToTarget(_top, index);
				}, _this._sleep);
			}
			
			//滚动到目标 target 目标距离
			//act: d向下滚, u向上滚
			this.scrollToTarget = function (target, index){
				var _this = this;
				var top = $(document).scrollTop();
				//得到滚动的目标距离
				var distance = Math.abs(top - target);
				//如果效率设置的目标距离,则返回小于的值
				distance = distance < _this._step ? distance : _this._step;
				//计算滚动条滚动到最底端距离窗口文档body的高度偏移
				var _wheight = $(document.body).outerHeight(true) - $(window).height();
				_this._timeid = setTimeout(function (){
					if (_this.act == 'd') {
						distance = _wheight - top < distance ? _wheight - top : distance;
						$(document).scrollTop(top += distance);
					}else if (_this.act == 'u'){
						$(document).scrollTop(top -= distance);
					}
					//如果没到目标,则调用scrollToTarget否则调用scrollTop
					!(top == target || top == _wheight) ? _this.scrollToTarget(target, index) : _this.scrollTop(index);
				}, _this._sleep);
			}
		}
		
		var _ScrollBar = new ScrollBar('.c1 .cc1', '.ulz', '.ulz li');
		_ScrollBar.menyClass = true;
		_ScrollBar.init();
});

</script>

<style>
.class1{
background:#DD9E72;
	color:#fff;
}
.class2{
background:#B4C562;
	color:#fff;
}
.class3{
background:#FA856F;
	color:#fff;
}
.class4{
background:#67C5D8;
	color:#fff;
}
.class5{
background:#E9B535;
	color:#fff;
}
.class6{
background:#C979DE;
	color:#fff;
}
.unClass{
	background:none;
	color:#999;
}
.newClass{
	background:#B4C562;
	color:#fff;
}
.c1{
	margin:0 auto;
	width:1000px;
	height:300px;
	border: 1px solid #ccc;
}
.c2{
	margin:0 auto;
	width:1000px;
	height:2800px;
	border: 1px solid #ccc;
	position: static;
	
}
.cc1 {
	border-bottom: 1px solid #ccc;
}
.ulz{
	margin: 0;
	padding: 0;
	position: fixed;
	width: 50px;
	list-style-type:none;
}
.ulz li{
	border: 1px solid #ccc;
	width: 50px;
	height:50px;
}

</style>