├── LICENSE
├── README.md
├── demo.gif
├── demo.html
├── eleFixed.js
├── eleFixed.min.js
└── package.json
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 KenyeeCheung
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## 介绍
2 |
3 | eleFixed是一款非常简单的使用动画来固定元素的插件（最常见的作用就是固定table的thead）
4 |
5 | 它可以同时固定多个HTMLElement而不用额外监听多个事件，而且你也可以随时删除某一个监听对象或者直接把eleFixed从你的网页中移除
6 |
7 | ## 使用
8 |
9 | 当你引入eleFixed.js的时候，它就已经帮你在全局定义好了eleFixed对象并监听scroll事件（仅仅一个）；
10 |
11 |
12 | ##### 以下为全局eleFixed对象的描述：
13 | eleFixed对象 | 描述
14 | --- |---
15 | targets | Array，用来存放多个需要固定的target对象，target对象格式见下表
16 | push | Function，接受一个target对象并推送元素到targets数组中
17 | delete | Function，从targets中删除指定的HTMLElement,只需要传入需要删除的HTMLElement对象
18 | destory | Function，移除eleFixed的监听事件、并删除eleFixed对象
19 |
20 |
21 |
22 |
23 | ##### eleFixed.push需要传入的对象（targrt）描述：
24 |
25 | target对象 | 描述
26 | --- |---
27 | target | HTMLElement，接收你想固定的元素，比如 document.getElementsByTagName('thead')[0]
28 | offsetTop | Number，此元素距离顶部多少像素时开始固定在顶部， 比如 200 (无需单位)
29 |
30 |
31 | ##### 插入target:
32 |
33 | ```html
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
50 | ```
51 |
52 | ##### 效果预览：
53 | 
54 |
55 | ##### 删除元素:
56 | ```html
57 |
61 | ```
62 |
63 | ##### 移除eleFixed:
64 | ```html
65 |
69 | ```
70 |
--------------------------------------------------------------------------------
/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KenyeeC/eleFixed/54eefa3fd5b7a9b32356d7283d969bdf6c368c41/demo.gif
--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
30 |
31 |
32 |
33 |
34 | | title |
35 | title |
36 | title |
37 | title |
38 | titlelonglonglong longlonglonglong |
39 | title |
40 | title |
41 | titlelonglonglonglong longlonglonglonglong |
42 |
43 |
44 |
45 |
46 |
47 |
55 |
56 |
69 |
70 |
--------------------------------------------------------------------------------
/eleFixed.js:
--------------------------------------------------------------------------------
1 | (function(){
2 |
3 | var eleFixed = {
4 | targets: [],
5 | push: null,
6 | destory: null,
7 | handler: null,
8 | delete: null
9 | }
10 |
11 | // push exefixed instance
12 | eleFixed.push = function (option) {
13 | if(typeof option !== 'object') return console.error('eleFixed: push param must be a Object')
14 | if(!option.target && !isElement(option.target)) return console.error('eleFixed: target must be a HTMLElement')
15 | if(!option.offsetTop && typeof option.offsetTop !== 'number') return console.error('eleFixed: param\'s offsetTop must be a Number')
16 |
17 | window.eleFixed.targets.push(option)
18 | }
19 |
20 | // eleFixed handler
21 | eleFixed.handler = function(){
22 | var offsetTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
23 | for(var i in eleFixed.targets){
24 | if(offsetTop > eleFixed.targets[i].offsetTop){
25 | eleFixed.targets[i].target.style.transform = 'translateY('+ (offsetTop - eleFixed.targets[i].offsetTop) +'px)'
26 | }else{
27 | eleFixed.targets[i].target.style.transform = 'translateY(0px)'
28 | }
29 | }
30 | }
31 |
32 | // delete one eleFixed instance
33 | eleFixed.delete = function (target) {
34 | if(target && isElement(target)){
35 | var targets = window.eleFixed.targets
36 | for(var i in targets){
37 | if(target.isEqualNode(targets[i].target)){
38 | target.style.transform = 'translateY(0px)'
39 | targets.splice(i, 1)
40 | break
41 | }
42 | }
43 | }
44 | }
45 |
46 | // destory eleFixed in window
47 | eleFixed.destory = function () {
48 | window.removeEventListener('scroll', eleFixed.handler)
49 | for(var i in window.eleFixed.targets){
50 | window.eleFixed.targets[i].target.style.transform = 'translateY(0px)'
51 | }
52 | window.eleFixed = null
53 | }
54 |
55 | // helper
56 | function isElement(value) {
57 | return (
58 | typeof HTMLElement === 'object' ? value instanceof HTMLElement :
59 | value && typeof value === "object" && value !== null && value.nodeType === 1 && typeof value.nodeName==="string"
60 | )
61 | }
62 |
63 | // umd expose
64 | if (typeof exports == "object") {
65 | module.exports = eleFixed
66 | } else if (typeof define == "function" && define.amd) {
67 | define(function(){ return eleFixed })
68 | } else {
69 | this.eleFixed = eleFixed
70 | }
71 |
72 | window.addEventListener('scroll', eleFixed.handler)
73 | })()
--------------------------------------------------------------------------------
/eleFixed.min.js:
--------------------------------------------------------------------------------
1 | !function(){function b(a){return"object"==typeof HTMLElement?a instanceof HTMLElement:a&&"object"==typeof a&&null!==a&&1===a.nodeType&&"string"==typeof a.nodeName}var a={targets:[],push:null,destory:null,handler:null,"delete":null};a.push=function(a){return"object"!=typeof a?console.error("eleFixed: push param must be a Object"):a.target||b(a.target)?a.offsetTop||"number"==typeof a.offsetTop?(window.eleFixed.targets.push(a),void 0):console.error("eleFixed: param's offsetTop must be a Number"):console.error("eleFixed: target must be a HTMLElement")},a.handler=function(){var c,b=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;for(c in a.targets)a.targets[c].target.style.transform=b>a.targets[c].offsetTop?"translateY("+(b-a.targets[c].offsetTop)+"px)":"translateY(0px)"},a.delete=function(a){var c,d;if(a&&b(a)){c=window.eleFixed.targets;for(d in c)if(a.isEqualNode(c[d].target)){a.style.transform="translateY(0px)",c.splice(d,1);break}}},a.destory=function(){window.removeEventListener("scroll",a.handler);for(var b in window.eleFixed.targets)window.eleFixed.targets[b].target.style.transform="translateY(0px)";window.eleFixed=null},"object"==typeof exports?module.exports=a:"function"==typeof define&&define.amd?define(function(){return a}):this.eleFixed=a,window.addEventListener("scroll",a.handler)}();
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "elefixed",
3 | "version": "1.0.0",
4 | "description": "element fixed",
5 | "main": "eleFixed.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/KenyeeC/eleFixed.git"
12 | },
13 | "keywords": [
14 | "element",
15 | "fixed",
16 | "table",
17 | "thead"
18 | ],
19 | "author": "kenyeecheung",
20 | "license": "MIT",
21 | "bugs": {
22 | "url": "https://github.com/KenyeeC/eleFixed/issues"
23 | },
24 | "homepage": "https://github.com/KenyeeC/eleFixed#readme"
25 | }
26 |
--------------------------------------------------------------------------------