这个是小米5网页http://www.mi.com/mi5/的全屏滚动,怎么在鼠标滑轮没有滑动的时候上面还显示一个div

这个是小米5网页http://www.mi.com/mi5/的全屏滚动,怎么在鼠标滑轮没有滑动的时候上面还显示一个div,如图一,在滑动的时候隐藏了,如图2,刚进去小米5介绍页是那个div是隐藏的,要鼠标滑上点就能显示,求大伙们怎么做呢,我知道全屏滚动怎么做,只是做出小米5那样的不会,做出来的好多问题

图片描述
图一

图片描述

图二
图片描述
图三

阅读 4.2k
4 个回答

不好意思,这几天出去旅游了,没看到邀请。一般这样的滚屏效果都是使用插件做的。在网上找一个能实现这样效果的插件,如果实在不行,可以对插件进行一些修改。因为自己造轮子总是比较慢吧,而且兼容性很成问题,里面的BUG说不定什么时候爆出来。还是找一个成熟的插件用一下吧,然后研究一下它的API,应该很快能搞定的。

原理大概是这样,你自己试下。首先判断滚动条位置,如果滚动条是在顶部,那么就显示默认的div就是那个带搜索框的。如果滚动条不在顶部,那么就显示那个精简版的div。这个判断放到鼠标滚动事件中,鼠标滚动事件根据不同的框架放到一个全局的地方。

监听动画,停止时候就显示,滑动就隐藏,提供个组件给你
https://github.com/alvarotrig...
有回调事件和初始事件,加入你想要的函数就好了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题