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

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 4703 days ago, the information mentioned may be changed or developed.

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

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

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

滑动

效果

元素

5 replies • 1970-01-01 08:00:00 +08:00

emric

Aug 2, 2013

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

scarlex

Aug 2, 2013

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

emric

Aug 3, 2013

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

slixurd

Aug 3, 2013 via Android

小心UC把CSS吃掉。

scarlex

Aug 3, 2013

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

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

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

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

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