側邊欄導航(移動端商品--評論--詳情)随樓層滑動高亮顯示

demo下載下傳位址

接觸前端一年時間，開始還能感覺到自己的進步，随着時間的推移，開始不知道方向。因為各種前端的架構和插件在網上都能夠找到現成的，直接下載下傳下來用就好了。

從來不考慮其中的實作原理什麼的，即便是去看了其中的源代碼，也是知其然而不知其是以然。舉一個簡單的例子：去年聖誕公司要求頁面上要有雪花飄落的效果，當時的第一想法，就是canvas繪圖制作這個動畫（必定教育訓練的時候學的飛機大戰有類似的效果），後來發現很難實作，于是就在網上找了一個jquery.snow.js的插件，發現原理很簡單，

(一個div中加入html的雪花----設定初始的css----執行從上到下的飄落動畫同時雪花在過程中透明----動畫完成移除該div),克隆多個div執行前邊的過程，看着是不是很簡單。

我當時也這麼認為，于是我就自己仿着做了一個（當時自己認為），其實就是照個抄了一遍，加了一點自己需要的功能（例如：随機雪花的顔色），然後我就認為這是自己的，在jquery的插件網站去釋出，結果被拒絕了，我當時很失望但是沒有找自己的原因（因為那是抄的），後來也寫了一些輪播，導航點選頁面滑動等（自己認為的插件），後來發現可複用性的很差，沒有起到插件的作用。通過看别人的，學習了一段時間，才決定再次寫一個，檢驗一下。

# 1.extend擴充方法

- iquery的extend方法，這是jquery插件常用的擴充方法方法，将插件的預設參數和使用者自定義參數合并為一個新參數的對象。

var defaults = {
	floorClass : '.scroll-floor',
	navClass : '.scroll-nav',
	activeClass : 'active',
	activeTop : 100,
	scrollTop : 100,
	delayTime : 200
};
var newOptions = $.extend({}, defaults, options);

複制

# 2.建立'擷取每個樓層的jquery對象，以及該樓層滑動到視窗某位置導航高亮的TOP值，點選導航頁面對應樓層滑動到視窗的某位置的TOP值'的函數

function getItem(_list,newOptions){
	_list.each(function() {
        var item = {};
        item.$obj = $body.find(this);
        item.$activeTop = $body.find(this).offset().top - newOptions.activeTop;
        item.$scrollTop = $body.find(this).offset().top + newOptions.scrollTop;
        
        data.push(item);
    });
}

複制

# 3.建立'滾動監聽函數，同時激活側邊欄導航高亮顯示'的函數

function scrollActive(_list,newOptions){
	var nowScrollTop = $(window).scrollTop();
	$.each(data,function(i,item){
		if(nowScrollTop > item.$activeTop){
			_list.removeClass(newOptions.activeClass).eq(i).addClass(newOptions.activeClass);
		}
	});
}

複制

# 4.建立'點選激活側邊欄導航高亮顯示'的函數

function clickActive(_index,newOptions){
	$('html,body').animate({'scrollTop' : data[_index].$scrollTop},newOptions.delayTime);
}

複制

# 5.插件接口的制作

var scroll_floor = window.scrollFloor = function(options){
	var newOptions = $.extend({}, defaults, options);
	var floorList = $body.find(newOptions.floorClass),navList = $body.find(newOptions.navClass);
	
	getItem(floorList,newOptions);
	scrollActive(navList,newOptions);
	
    $(window).bind('scroll',function(){scrollActive(navList,newOptions);});
    navList.bind('click',function(){
        var _index = $body.find(this).index();
        clickActive(_index,newOptions);
    });
}

複制

# 6.完整插件的代碼

(function(window){
	var defaults = {
		floorClass : '.scroll-floor',
		navClass : '.scroll-nav',
		activeClass : 'active',
		activeTop : 100,
		scrollTop : 100,
		delayTime : 200
	};
	
	var $body = $('body'),data = [];
	function getItem(_list,newOptions){
		_list.each(function() {
            var item = {};
            item.$obj = $body.find(this);
            item.$activeTop = $body.find(this).offset().top - newOptions.activeTop;
            item.$scrollTop = $body.find(this).offset().top + newOptions.scrollTop;
            
            data.push(item);
        });
	}
	
	function scrollActive(_list,newOptions){
		var nowScrollTop = $(window).scrollTop();
		$.each(data,function(i,item){
			if(nowScrollTop > item.$activeTop){
				_list.removeClass(newOptions.activeClass).eq(i).addClass(newOptions.activeClass);
			}
		});
	}
	
	function clickActive(_index,newOptions){
    	$('html,body').animate({'scrollTop' : data[_index].$scrollTop},newOptions.delayTime);
    }
	
	var scroll_floor = window.scrollFloor = function(options){
		var newOptions = $.extend({}, defaults, options);
		var floorList = $body.find(newOptions.floorClass),navList = $body.find(newOptions.navClass);
		
		getItem(floorList,newOptions);
		scrollActive(navList,newOptions);
		
        $(window).bind('scroll',function(){scrollActive(navList,newOptions);});
        navList.bind('click',function(){
            var _index = $body.find(this).index();
            clickActive(_index,newOptions);
        });
	}
})(window);

複制

# 7.總結

該插件參考了會找人web端首頁動畫的js，就是先将所有樓層查找出來，然後将其需要的各個參數放入一個對象，滾動的監聽的時候對該數組循環比對的思路。

思路對一個插件的制作很重要，就像我開始第一次制作這個插件的時候，就是将所有樓層的參數放到一個數組，然後對各個區間判斷，這樣就會使問題複雜話，同時還不好控制。

程式員的思路很重要，最開始可以很死闆的按照步驟來，但是當我們慢慢的進化，就需要不斷的對代碼優化，每次優化都是一次學習，慢慢的不知不覺就會發現原來你會的雪萊越多。

例如：

if(nowScrollTop > item.$activeTop){
	_list.removeClass(newOptions.activeClass).eq(i).addClass(newOptions.activeClass);
}

複制

替換為：

nowScrollTop > item.$activeTop&&_list.removeClass(newOptions.activeClass).eq(i).addClass(newOptions.activeClass);

複制

開始都一樣，但是它培養了我們寫代碼的習慣，越寫越簡單。不對的地方敬請指正！！！

類似京東（商品----詳情----評論）頁面

wap效果位址：https://rattenking.github.io/demo/06/scrollFloorWap.html

wap效果圖：

下載下傳wap的demo：

http://www.jq22.com/jquery-info15387

類似京東首頁樓層

web效果位址：https://rattenking.github.io/demo/06/scrollFloorWeb.html

web效果圖：

下載下傳web的demo：

http://www.jq22.com/jquery-info15387