模仿阿里巴巴楼层导航特效
- 特效要求:
1. 右边导航楼层是随着滚动条的滚动位置是不动的
2. 当滚动条滚动时,导航的div页面在我们页面的上方位置时(视野最明显的位置),对应的右边导航
的楼层的样式,会发生相应的变化。
3. 点击右边导航楼层的顶部或者底部,楼层会消失,显示。
4. 楼层下方置顶功能。
5. 只有当滚动条滚动到特定的高度时,右边导航的楼层才会出现,如果滚动条滚动的高度小于这个
临界值的时候,楼层是不会显示的。
- 特效原理:
1. 右边导航楼层一个div样式:position:fixed,这样滚动条在滚动的时候,右边楼层导航div位置始终不
边。
2. 在滚动条滚动的时候,先获得滚动条相对于整个网页顶部的高度大小top,如果top + 某个高
度大于右边div的长度相对于整个网页顶部,右边导航楼层的样式发生变化。
- 为了方便大家学习我把这个特效贴出来。
相关推荐
CrocdileChan 2020-10-08
Shanker 2020-09-18
lyqcsdn 2020-06-01
守护阿里巴巴 2020-06-01
守护阿里巴巴 2020-05-19
国外客 2020-05-12
大白配小猪 2020-04-20
龙衣 2020-03-27
龙衣 2020-03-27
leeyhCoding 2020-01-08
风中呢喃者 2020-01-07
Javamoon 2019-12-27
枫祉 2019-12-25
技术积累LZ 2019-12-20
李迟 2019-12-23
bktest 2019-12-21
suizhituan 2019-12-20