ScrollDir 是 Scroll Direction 的缩写,它是一个 0 依赖,并且大小 〜1kb 的微型 JavaScript 插件。它通过数据属性轻松利用 CSS 来控制垂直滚动。可用作向下滚动隐藏,向上滚动显示的粘性导航菜单。
ScrollDir 的效果就像粘性导航菜单,当你向下滚动页面的时候,导航菜单隐藏,向上滚动页面的时候,导航菜单显示。
特色:
- 根据滚动方向显示或隐藏粘性元素🐥
- 在滚动的时候只改变其方向属性
- 忽略导致不必要的元素抖动的滚动动作
用法
ScrollDir 会将 <html>
元素上的 data-scrolldir
属性设置为 up
或 down
:
<html data-scrolldir="up">
或者
<html data-scrolldir="down">
然后根据用户滚动的方向更改样式:
[data-scrolldir="down"] .my-fixed-header { display: none; }
设置
简单模式
只需要在你的 HTML 文档中添加 scrolldir.auto.min.js 文件。
然后使用 [data-scrolldir="down"]
和 [data-scrolldir="up"]
写一些 CSS 样式。
定制模式
添加 scrolldir.min.js 。你可以访问下面的 API 选项,并且必须调用 scrollDir 。
scrollDir();
使用 data-scrolldir
以外的属性:
scrollDir({ attribute: 'new-attribute-name' });
将 Scrolldir 属性添加到不同的元素中:
scrollDir({ el: 'your-new-selector' });
关闭 Scrolldir :
scrollDir({ off: true });
在页面加载(或应用程序启动)时,提供不同的滚动方向:
scrollDir({ direction: 'up' }); // 默认为向下滚动
示例
这个 JS 的效果就像本站顶部的导航菜单效果,当你向下滚动的时候导航隐藏,向上滚动的时候导航显示。(不过本站是直接使用 JS 来控制)
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”VPeQrB” default_tab=”result” user=”yowainwright”]See the Pen ScrollDir Example by Jeff Wainwright (@yowainwright) on CodePen.[/codepen_embed]