Javascript 隐藏/显示根据用户滚动响应的导航（无动画）

我正在创建一个标题，当用户向下滚动时，部分将被隐藏，而在向上滚动时，部分将被再次显示。类似于导航的工作方式。这是我的设置，它的工作正常

>现在我想调整显示/隐藏事件，使其具有上下文意识，即根据用户的滚动速度进行响应，而不是使用预先指定的动画

很多移动应用程序都有这种行为。在没有其他好例子的情况下，请在执行搜索后查看谷歌或Facebook的iOS应用程序，当用户开始向上滚动时，会显示导航

---

我不知道从哪里开始，所以任何人给我指出正确的方向都将不胜感激

这是一个完美的例子，我正在寻找：