滚动切换tab样式的效果实现

参考实例：百度首页的卡片功能

 

效果大致描述：鼠标滚动或者点击指定的tab时，相应的tab标签样式改变，另外四个样式恢复默认，同时相应的内容显示到可视区域。

思路：获取页面或者层的滚动高度，以及页面内容每一部分的高度，当滚动时用js判断高度之间的关系，从而为指定tab赋予样式。而点击的效果可以用"使用<a>标签来做tab,页面每部分用指定id的div包裹"的方式来实现。

关键点：

1.滚动高度的获取。在获取页面的scrollTop值时始终获取不到，采用document.documentElement.scrollTop的方式也是不行（使用的是chrome浏览器），最后采用删掉doctype的方式来实现。

2.滚动事件的采用。一开始采用了自定义函数，将判断和修改样式封到函数内部，并使用setInterval的方式来持续调用，后来发觉此种方式不好，遂度娘，得出window.onscroll方式。

大致代码如下：

var divY = document.getElementById('divID').offsetHight;
..多个div的获取..
window.onscroll = function(){
var Y = document.body.scrollTop;
if (Y 与多个div的和值的分别比较){
改变样式代码
};

上传一张成品的图：

大致效果就是这样，鼠标滚动或者点击左侧的tab页面都会滚动至相应位置，并且左边的tab样式会随之变化，另有类似某些官网展示产品的页面那种带有滚动动画的效果也可以利用这些原理配合jquery + jquery-mousewheel库来做。