fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

ScrollDir
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:https://dollarshaveclub.github.io/scrolldir/
GitHub:https://github.com/dollarshaveclub/scrolldir
网站描述:利用 CSS 来控制垂直滚动的 JavaScript 插件

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 属性添加到不同的元素中:

scrollDir({ el: 'your-new-selector' });

关闭 Scrolldir :

scrollDir({ off: true });

在页面加载(或应用程序启动)时,提供不同的滚动方向:

scrollDir({ direction: 'up' }); // 默认为向下滚动

链接: https://fly63.com/nav/1070

more>>
相关栏目
sass
成熟、稳定和强大的CSS扩展语言
官网GitHub
postcss
PostCSS是一个使用JavaScript插件来转换CSS的工具。
官网GitHub
stylus
Stylus是一个高效、动态以及丰富的CSS预处理器
官网GitHub
animate.css
齐全的CSS3动画库
官网GitHub
Metro UI
基于平板界面设计CSS库是一种界面展示技术
官网GitHub
Spectre.css
轻量响应式 CSS 框架
官网GitHub
water.css
只需添加CSS框架即可应用样式,无需定义元素类
官网GitHub
DropCSS
一个用来清理无用 CSS 的小工具
点击进入GitHub
Pattern.css
一个CSS库,使用美丽的图案填充空的背景。
官网GitHub
three-dots
一组CSS加载动画,它由三个点组成,而这些点仅由单个元素组成
官网GitHub
CSSeffectsSnippets
提供了漂亮的CSS动画
官网GitHub
Angrytools
多样定制,实用,支持单个动画代码复制的网站
官网
magic
带多种动画效果的CSS3动画库
官网GitHub
topcoat
一款为简洁高速Web应用提供CSS开发的工具
官网GitHub
Biomatic UI
简单,灵活的CSS框架
官网GitHub
css-animation-101
从零开始介绍 CSS 动画开源电子书
官网GitHub

手机预览