如何实现页面上的元素的“回弹”效果？

Question

说一下要达成的效果：比如页面顶部有导航栏<nav>，当页面往下翻一定程度后，<nav>会自动向上移动隐藏，这个较简单。“回弹效果”即当页面向上翻至一定程度时，<nav>会向下“跳”出来，不会直接停在原位置，而要稍微“蹦跶”几下，“回弹效果”即这里的“蹦跶”几下。
再网上搜了一下“回弹”，大都是ios页面下拉后等待刷新再回弹至原位，感觉根本不是我想要的东西，麻烦各位帮下忙，谢谢。
如果有较为详细的教程连接也行。

Answer 1

想做好动效，是要具备一些设计功力的，或花时间调校。建议从开源动画库拿来即用，像animejs应该有你要的“回弹”效果。

Answer 2

懒得写代码了，但是原理很简单：

1. 在你需要的元素上监听mousedown, mousemove或者touchstart, touchmove，触发后检查是否为向下滑动，如果是就根据鼠标/手指的拖动移动元素向下。
2. 需要一个向下移动的最大值，越接近这个距离，元素移动的距离就越小，达到这个距离则无法继续拖动。
3. 松开后给元素一个“蹦哒”动画用的class。用css写回弹动画，用js的setTimeout来删除那个class。
4. 你可以在回弹开始或者结束的时候，刷新内容。