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

模仿阿里巴巴楼层导航特效
  •  特效要求:

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

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

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

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

         4.  楼层下方置顶功能。

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

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

 

  •  特效原理:

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

            边。

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

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

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