滾動切換tab樣式的效果實現

效果大致描述：滑鼠滾動或者點選指定的tab時，相應的tab標籤樣式改變，另外四個樣式恢復預設，同時相應的內容顯示到可視區域。

思路：獲取頁面或者層的滾動高度，以及頁面內容每一部分的高度，當滾動時用js判斷高度之間的關係，從而為指定tab賦予樣式。而點選的效果可以用"使用標籤來做tab,頁面每部分用指定id的div包裹"的方式來實現。

關鍵點：

1.滾動高度的獲取。在獲取頁面的scrolltop值時始終獲取不到，採用document.documentelement.scrolltop的方式也是不行（使用的是chrome瀏覽器），最後採用刪掉doctype的方式來實現。

2.滾動事件的採用。一開始採用了自定義函式，將判斷和修改樣式封到函式內部，並使用setinterval的方式來持續呼叫，後來發覺此種方式不好，遂度娘，得出window.onscroll方式。

大致**如下：

1
var divy = document.getelementbyid('divid').offsethight;
2..多個div的獲取..
3 window.onscroll = function
();

上傳一張成品的圖：

大致效果就是這樣，滑鼠滾動或者點選左側的tab頁面都會滾動至相應位置，並且左邊的tab樣式會隨之變化，另有類似某些官網展示產品的頁面那種帶有滾動動畫的效果也可以利用這些原理配合jquery + jquery-mousewheel庫來做。