求个指导，想知道移动设备上面怎么实现元素在滑动时出现的效果？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 4144 天前的主题，其中的信息可能已经有所发展或是发生改变。

一个很常见的效果，页面内有一个元素，通常都是fixed在顶部的。
然后向上滑动时那个元素会自动向上消失，向下滑动的时候元素会出现。
不是滑动完才出现的，是滑动过程中随着滑动距离出现的。。

如果你手上有安卓设备，就用自带的搜索搜点东西，然后向上/向下滑动一下屏幕，就会看到顶部的搜索栏是这种效果的。
如果是手上有ios设备，就打开chrome，随便打开个网页，向上/向下滑动，就会看到窗体顶部也是这种效果的。

有人知道这种效果是怎么实现的吗？

滑动

效果

元素

5 条回复 • 1970-01-01 08:00:00 +08:00

emric

2013-08-02 05:03:36 +08:00

http://gist.github.com/fcbb946c6d9aa8624771
>n< 忘记加注释了!
"就是利用滚动事件对比上一次滚动位置."

scarlex

2013-08-02 21:54:11 +08:00

@emric 我试过不断通过element.css('top', value + 'px')的方法来不断改变位置，不过各个手机浏览器表现起来都不一样。效果很不好。
不知道你这种方法表现起来怎么样？

emric

2013-08-03 12:22:49 +08:00

@scarlex
>///< 好吧,我只做了一半..
var mh = 0; // menu height
var st = $(this).scrollTop();
element.css({position : absolute, top : st - mh});
:P 这样拉下来就是这个效果了

slixurd

2013-08-03 15:48:29 +08:00 via Android

小心UC把CSS吃掉。

scarlex

2013-08-03 16:04:21 +08:00

@emric
PC端怎么做都没问题，因为PC的性能很高。
但到了性能相对较差的移动设备，实现起来很麻烦，各个手机浏览器的兼容性有差异。

另外那个效果不仅仅是随着浏览器滚动而出现/消失这么简单，还有是当你放手(触摸结束)的时候会自动判断是出现还是消失。

我在实现这个效果的时候还遇到一个问题，是chrome for android的一个bug。这个bug表现起来就是当触发touchmove事件之后，它就不会触发touchend事件。

具体可以看下这里
https://code.google.com/p/chromium/issues/detail?id=152913

最后我得出的结论是....要这个效果表现好点的话就直接做成app吧///