├── README.md
├── js
    ├── jquery.js
    └── jquery.sticky.elements.js
├── license.md
├── package.json
└── sticky-elements.jquery.json


/README.md:
--------------------------------------------------------------------------------
 1 | jQuery-sticky-elements
 2 | ======================
 3 | 
 4 | jquery plugin to create sticky elements -- worrying how to keep your `div` 
 5 | at position you want, want to create rules for it to stay & hide, `jQuery-sticky-elements` is 
 6 | made just for you.
 7 | 
 8 | [View Demo](https://blog.minhazav.dev/research/jquery-sticky-elements)
 9 | 
10 | **Screenshot**
11 | ![Screenshot](https://preview.ibb.co/cCzA07/Capture.png)
12 | 
13 | =============
14 | 
15 | How to use
16 | =============
17 | Checkout the [demo page](https://blog.minhazav.dev/research/jquery-sticky-elements) on more details on how to use.
18 | 
19 | ```html
20 | <div id="grid5"> some content here </div>
21 | 
22 | <script type="text/javascript" src="../js/jquery.js"></script>
23 | <script type="text/javascript" src="../js/jquery.sticky.elements.js"></script>
24 | <script type="text/javascript">
25 | 	$("#grid5").stikify({rate: 3.4, cieling: -100});
26 | </script>
27 | ```
28 | 
29 | just include jQuery, our sticky element plugin & you have just `stikified` it!
30 | 
31 | ```js
32 | $("#grid4").stikify({
33 | 	floor: 100,		// the height at which the items starts to scroll
34 | 	rate: 1.6,		// speed corresponding to scroll
35 | 	cieling: -100,	// max height (pixel) that the item can move up.
36 | 	trans: true,	// transparency with scroll
37 | });
38 | ```
39 | 
40 | 


--------------------------------------------------------------------------------
/js/jquery.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mebjas/jQuery-sticky-elements/98766f673ba32364d7c9a411fc2b45387a4edcdf/js/jquery.js


--------------------------------------------------------------------------------
/js/jquery.sticky.elements.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * jquery plugin to create image jigsaw
 3 |  */
 4 | var objx;
 5 | (function( $ ) {
 6 | 	$.fn.stikify = function(options)
 7 | 	{
 8 | 		var settings = $.extend( {}, $.fn.stikify, options );
 9 | 		$.fn.stikify.defaults = settings;
10 | 		$.each(this, function(index, obj) {
11 | 			var $this = $(obj);
12 | 			
13 | 			if (typeof options.floor == 'undefined')
14 | 				options.floor = $this.position().top;
15 | 
16 | 			if (typeof options.cieling == 'undefined') {
17 | 				// -10 keeps things safe
18 | 				options.cieling = $this.outerHeight()*(-1) - 10; 
19 | 			}
20 | 
21 | 			if (typeof options.rate == 'undefined')
22 | 				options.rate = 1;	//Normal scroll
23 | 
24 | 			var $prop = options;
25 | 			$(window).scroll(function() {
26 | 				$this.css("position", "fixed");
27 | 				var cp = $(window).scrollTop();
28 | 				if (cp == 0) {
29 | 					$this.animate({top: $prop.floor +"px"}, "slow");
30 | 					$this.animate({opacity: 1}, "fast");
31 | 					return;
32 | 				}
33 | 				var lp = parseInt($this.attr("lp"));
34 | 				if(isNaN(lp))
35 | 					lp = 0;
36 | 
37 | 				var dy = lp - cp;
38 | 				// ^ -ve if going down, +ve otherwise
39 | 				var cpos = parseInt($this.css("top"));
40 | 				if (isNaN(cpos))
41 | 					cpos = options.floor;
42 | 				
43 | 
44 | 				var npos = cpos + dy / $prop.rate;
45 | 
46 | 				if (dy  <= 0 && npos < $prop.cieling) {
47 | 					// going up
48 | 					npos = $prop.cieling;
49 | 				} else if (dy > 0 && npos > $prop.floor) {
50 | 					// going down
51 | 					npos = $prop.floor;
52 | 				}
53 | 				$this.css("top", npos +"px");
54 | 
55 | 				if (typeof $prop.trans != 'undefined'
56 | 					&& $prop.trans == true) {
57 | 					// Transparency as one move up
58 | 					$this.css("opacity", 1 - (($prop.floor - npos) / ($prop.floor - $prop.cieling)));
59 | 				}
60 | 				$this.attr("lp", cp);
61 | 			});
62 | 		});
63 | 		
64 | 	}
65 | }( jQuery ));


--------------------------------------------------------------------------------
/license.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) <2014> <copyright minhaz, minhaz@owasp.org>
 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
13 | all 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
21 | THE SOFTWARE.


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "sticky-elements",
 3 |     "title": "jQuery sticky elements",
 4 |     "description": "jQuery plugin for easily implementing scroll rate, upperbound & lower bound for translation during scroll! Very handy for creating parallax effects",
 5 |     "keywords": [
 6 |         "jquery-plugin",
 7 |         "ecosystem:jquery",
 8 |         "scroll",
 9 |         "speed",
10 |         "parallax",
11 |         "sticky",
12 |         "upperbound",
13 |         "lowerbound"
14 |     ],
15 |     "version": "0.1.0",
16 |     "author": {
17 |         "name": "minhaz",
18 |         "url": "https://minhaz.cistoner.org/"
19 |     },
20 |     "licenses": [
21 |         {
22 |             "type": "MIT",
23 |             "url": "https://github.com/mebjas/jQuery-sticky-elements/blob/master/license.md"
24 |         }
25 |     ],
26 |     "bugs": "https://github.com/mebjas/jQuery-sticky-elements/issues",
27 |     "homepage": "cistoner.org/sample/jQuery-sticky-elements",
28 |     "dependencies": {
29 |         "jquery": ">=1.5"
30 |     }
31 | }


--------------------------------------------------------------------------------
/sticky-elements.jquery.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "sticky-elements",
 3 |     "title": "jQuery sticky elements",
 4 |     "description": "jQuery plugin for easily implementing scroll rate, upperbound & lower bound for translation during scroll! Very handy for creating parallax effects",
 5 |     "keywords": [
 6 |         "scroll",
 7 |         "speed",
 8 |         "parallax",
 9 |         "sticky",
10 |         "upperbound",
11 |         "lowerbound"
12 |     ],
13 |     "version": "0.1.0",
14 |     "author": {
15 |         "name": "minhaz",
16 |         "url": "https://minhaz.cistoner.org/"
17 |     },
18 |     "licenses": [
19 |         {
20 |             "type": "MIT",
21 |             "url": "https://github.com/mebjas/jQuery-sticky-elements/blob/master/license.md"
22 |         }
23 |     ],
24 |     "bugs": "https://github.com/mebjas/jQuery-sticky-elements/issues",
25 |     "homepage": "cistoner.org/sample/jQuery-sticky-elements",
26 |     "dependencies": {
27 |         "jquery": ">=1.5"
28 |     }
29 | }


--------------------------------------------------------------------------------