模仿阿里巴巴楼层导航特效

阿里巴巴楼层导航特效"/>

模仿阿里巴巴楼层导航特效

•  特效要求：

         1.  右边导航楼层是随着滚动条的滚动位置是不动的

         2.  当滚动条滚动时，导航的div页面在我们页面的上方位置时（视野最明显的位置），对应的右边导航

              的楼层的样式，会发生相应的变化。

         3.  点击右边导航楼层的顶部或者底部，楼层会消失，显示。

         4.  楼层下方置顶功能。

         5.  只有当滚动条滚动到特定的高度时，右边导航的楼层才会出现，如果滚动条滚动的高度小于这个

              临界值的时候，楼层是不会显示的。

•  特效原理：

       1.  右边导航楼层一个div样式：position：fixed,这样滚动条在滚动的时候，右边楼层导航div位置始终不

            边。

       2.  在滚动条滚动的时候，先获得滚动条相对于整个网页顶部的高度大小top，如果top + 某个高

            度大于右边div的长度相对于整个网页顶部，右边导航楼层的样式发生变化。

•    为了方便大家学习我把这个特效贴出来。