sliding总结

布局

在写每一个具体的页面时，一定一定要精心设计它的布局，在一定能保证实现JS行为的高度上来设计布局。考虑每一个标签的位置，尺寸，如何嵌套。
当然，sliding这个插件主要的是两大部分：content and sliding。注意锚点的设置。

JS交互

在写JS交互时，时刻要问自己接下来我要做的是什么或者接下来我要解决的问题的是什么？并且要学会将大的问题拆分成小的问题。
先想好你都要解决哪些问题，这些问题都可以如何解决？都用到哪几种方法，每一种方法是否可以应用同一个方法？这些方法之间是否具有相关性？

针对于这个插件，需要解决的问题如下：
1.content滚动
* 如何检测锚点？
* 检测到锚点以后如何使箭头指向相应条目？
* 当箭头到达一定位置，sliding滑块相应的移动？
2.sliding条目的点击
* 点击条目使箭头指向相应的条目？
* 点击条目使content滚动到相应的内容区？
* 当箭头到达一定位置，sliding滑块相应的移动？
3.两者之间的联系
* 点击条目会造成content触发滚动时间，反过来影响sliding，如何阻止这种影响？

具体技术细节

1.锚点的检测.

slidings.png

每一块内容都有自己的一块检测区域，检测父元素的scrollTop是否在检测区内即可检测到相应的内容。

2.获取scrollTop

刚开始考虑在滚动的过程中，持续获取scrollTop值，当时却发现会出现很多bug，于是乎想到通过延迟函数异步获取每次滚动接触后的scrollTop值，这点很巧妙，值得深深研究一下

var timer = flase; elem.on('scroll',function(){ if(timer){ clearTimerOut(timer); } timer = setTimerOut(function(){ //执行JS代码 })； });

3.点击条目后阻止页面滚动对sliding造成的影响

引入一个全局的引用类型的变量，通过检测对象中值的值来控制页面滚动造成的影响。

好了，今天先到这吧，肚子有些饿了，总之，任重而道远！