javascript - 这个是小米5网页http://www.mi.com/mi5/的全屏滚动,怎么在鼠标滑轮没有滑动的时候上面还显示一个div
ringa_lee
ringa_lee 2017-04-11 11:52:01
[JavaScript讨论组]

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


图一

图二

图三

ringa_lee
ringa_lee

ringa_lee

全部回复(4)
怪我咯

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

天蓬老师

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

伊谢尔伦

http://codepen.io/DogburnDesi...

看这个:原理是一样的。
监听滚动位置然后改版css position。

大家讲道理

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号