做有态度的前端团队

网易FEG前端团队

标签 sticky 下的文章

  • sticky解决粘性交互在微信的问题

    前言 粘性交互 指的是某个模块在页面滚动到指定位置时脱离页面不再顺页面滚动而滚动,而是处于屏幕某一固定位置,变成fixed状态,粘着屏幕某一边缘。这种交互经常用到一些导航,比如《大话西游》手游移动官网,效果请看下面动图示意: 这种交互的主要逻辑是:导航模块默认是普通流体布局,然后监听window的scroll事件,当页面滚动到导航模块的位置时把导航改成position:fixed状态并调整模块的显示位置即可。在大部分浏览器没什么问题,但是微信对scroll这高频事件做了处理,即使你绑定了scroll事件,在滑动屏幕时也要等页面滚动完后才会执行。所以在微信下这种粘性交互是不流畅的:......

    JavaScript,CSS