布局
在寫每一個具體的頁面時备埃,一定一定要精心設計它的布局姓惑,在一定能保證實現(xiàn)JS行為的高度上來設計布局“唇牛考慮每一個標簽的位置于毙,尺寸,如何嵌套辅搬。
當然唯沮,sliding這個插件主要的是兩大部分:content and sliding。注意錨點的設置堪遂。
JS交互
在寫JS交互時烂翰,時刻要問自己接下來我要做的是什么或者接下來我要解決的問題的是什么?并且要學會將大的問題拆分成小的問題蚤氏。
先想好你都要解決哪些問題甘耿,這些問題都可以如何解決?都用到哪幾種方法竿滨,每一種方法是否可以應用同一個方法佳恬?這些方法之間是否具有相關性捏境?
針對于這個插件,需要解決的問題如下:
1.content滾動
* 如何檢測錨點毁葱?
* 檢測到錨點以后如何使箭頭指向相應條目垫言?
* 當箭頭到達一定位置,sliding滑塊相應的移動倾剿?
2.sliding條目的點擊
* 點擊條目使箭頭指向相應的條目筷频?
* 點擊條目使content滾動到相應的內(nèi)容區(qū)?
* 當箭頭到達一定位置前痘,sliding滑塊相應的移動凛捏?
3.兩者之間的聯(lián)系
* 點擊條目會造成content觸發(fā)滾動時間,反過來影響sliding芹缔,如何阻止這種影響坯癣?
具體技術細節(jié)
1.錨點的檢測.
每一塊內(nèi)容都有自己的一塊檢測區(qū)域,檢測父元素的scrollTop是否在檢測區(qū)內(nèi)即可檢測到相應的內(nèi)容最欠。
2.獲取scrollTop
剛開始考慮在滾動的過程中示罗,持續(xù)獲取scrollTop值,當時卻發(fā)現(xiàn)會出現(xiàn)很多bug芝硬,于是乎想到通過延遲函數(shù)異步獲取每次滾動接觸后的scrollTop值蚜点,這點很巧妙,值得深深研究一下
var timer = flase; elem.on('scroll',function(){ if(timer){ clearTimerOut(timer); } timer = setTimerOut(function(){ //執(zhí)行JS代碼 })拌阴; });
3.點擊條目后阻止頁面滾動對sliding造成的影響
引入一個全局的引用類型的變量绍绘,通過檢測對象中值的值來控制頁面滾動造成的影響。
好了皮官,今天先到這吧脯倒,肚子有些餓了,總之捺氢,任重而道遠藻丢!