├── .gitignore
├── LICENSE-MIT
├── README.md
├── cortex.json
├── index.html
├── index.js
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
--------------------------------------------------------------------------------
/LICENSE-MIT:
--------------------------------------------------------------------------------
1 | Copyright (c) 2014 ltebean
2 |
3 | Permission is hereby granted, free of charge, to any person
4 | obtaining a copy of this software and associated documentation
5 | files (the "Software"), to deal in the Software without
6 | restriction, including without limitation the rights to use,
7 | copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | copies of the Software, and to permit persons to whom the
9 | Software is furnished to do so, subject to the following
10 | conditions:
11 |
12 | The above copyright notice and this permission notice shall be
13 | included in all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
22 | OTHER DEALINGS IN THE SOFTWARE.
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ###Usage:
2 |
3 | ```javascript
4 | // commonjs
5 | var sticky = require('sticky-header');
6 |
7 | // or directly include the script then 'sticky' will be global
8 |
9 | var nav = document.getElementById('nav')
10 | // make '.nav' stick to the top
11 | sticky(nav);
12 |
13 | // make '.nav' stick to top 100px
14 | sticky(nav, 100);
15 | ```
16 |
17 | ###Example:
18 |
19 | See http://ltebean.github.io/sticky-header
--------------------------------------------------------------------------------
/cortex.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "sticky-header",
3 | "version": "0.2.0",
4 | "description": "pure javascript implementation that makes an element stick to the top when scrolling down the page",
5 | "main": "index.js",
6 | "repository": "git://github.com/ltebean/sticky-header.git",
7 | "keywords": [
8 | "sticky","header","browser"
9 | ],
10 | "license": "MIT",
11 | "author": {
12 | "name": "ltebean",
13 | "email": "yucong1118@gmail.com"
14 | },
15 | "bugs": {
16 | "url": "http://github.com/ltebean/sticky-header/issues"
17 | },
18 | "homepage": "http://github.com/ltebean/sticky-header",
19 | "engines": {
20 | "neuron": "*"
21 | },
22 | "devDependencies": {
23 | "assert": "*"
24 | }
25 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
21 |
22 |
23 |
29 |
30 |
31 | 
32 |
33 |
34 |
40 |
41 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | ! function(name, definition) {
2 | if (typeof module != 'undefined' && module.exports) module.exports = definition();
3 | else if (typeof define == 'function') define(definition);
4 | else this[name] = definition();
5 | }('sticky', function() {
6 |
7 | return function sticky(el, top, options) {
8 |
9 | var requiredOriginalStyles = ['position', 'top', 'left', 'z-index'];
10 |
11 | var requiredTop = top || 0;
12 | var originalRect = calcRect(el);
13 | var styles = {
14 | position: 'fixed',
15 | top: requiredTop + 'px',
16 | left: originalRect.left + 'px',
17 | // width: originalRect.width + 'px',
18 | 'z-index': 9999
19 | }
20 |
21 | if(options && options.enforceWidth) {
22 | styles.width = originalRect.width + 'px';
23 | }
24 |
25 | var originalStyles = {}
26 | requiredOriginalStyles.forEach(function(key) {
27 | originalStyles[key] = el.style[key];
28 | });
29 |
30 | var onscroll;
31 | if (window.onscroll) {
32 | onscroll = window.onscroll;
33 | }
34 |
35 | window.onscroll = function(event) {
36 | if (getWindowScroll().top > originalRect.top - requiredTop) {
37 | for (key in styles) {
38 | el.style[key] = styles[key];
39 | }
40 | } else {
41 | for (key in originalStyles) {
42 | el.style[key] = originalStyles[key];
43 | }
44 | }
45 | onscroll && onscroll(event)
46 | }
47 | }
48 |
49 | function calcRect(el) {
50 | var rect = el.getBoundingClientRect();
51 | var windowScroll = getWindowScroll()
52 | return {
53 | left: rect.left + windowScroll.left,
54 | top: rect.top + windowScroll.top,
55 | width: rect.width,
56 | height: rect.height
57 | }
58 | }
59 |
60 | function getWindowScroll() {
61 | return {
62 | top: window.pageYOffset || document.documentElement.scrollTop,
63 | left: window.pageXOffset || document.documentElement.scrollLeft
64 | }
65 | }
66 |
67 | });
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "sticky-header",
3 | "version": "0.3.0",
4 | "description": "pure javascript implementation that makes an element stick to the top when scrolling down the page",
5 | "main": "index.js",
6 | "directories": {
7 | "test": "test"
8 | },
9 | "scripts": { },
10 | "repository": {
11 | "type": "git",
12 | "url": "git@github.com:ltebean/sticky-header.git"
13 | },
14 | "keywords": [
15 | "sticky","header","browser"
16 | ],
17 | "author": "ltebean",
18 | "license": "MIT",
19 | "bugs": {
20 | "url": "https://github.com/ltebean/sticky-header/issues"
21 | },
22 | "homepage": "https://github.com/ltebean/sticky-header"
23 | }
24 |
--------------------------------------------------------------------------------
32 |