ScrollDir 介绍
ScrollDir 是 Scroll Direction 的缩写，它是一个 0 依赖，并且大小 〜1kb 的微型 JavaScript 插件。它通过数据属性轻松利用 css 来控制垂直滚动。可用作向下滚动隐藏，向上滚动显示的粘性导航菜单。
ScrollDir 的效果就像粘性导航菜单，当你向下滚动页面的时候，导航菜单隐藏，向上滚动页面的时候，导航菜单显示。
特色：
根据滚动方向显示或隐藏粘性元素
在滚动的时候只改变其方向属性
忽略导致不必要的元素抖动的滚动动作
用法
ScrolScrollDir 会将 <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({ el: 'your-new-selector' });
关闭 Scrolldir ：
scrollDir({ off: true });
在页面加载（或应用程序启动）时，提供不同的滚动方向：
scrollDir({ direction: 'up' }); // 默认为向下滚动
网站地址:https://dollarshaveclub.github.io/scrolldir/
GitHub:https://github.com/dollarshaveclub/scrolldir
网站描述:利用 CSS 来控制垂直滚动的 JavaScript 插件
ScrollDir
官方网站：https://dollarshaveclub.github.io/scrolldir/
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。