├── LICENSE
├── README.md
├── jquery.fixit.js
└── package.json


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 itsprakash87
 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 | # Fixit
  2 | 
  3 | Fixit is a jquery plugin which can be used to fix any element on the webpage.
  4 | For Demo : [Click here](http://itsprakash87.github.io/demo/fixit/index.html)
  5 | 
  6 | 
  7 | ## Fixit : 
  8 | 
  9 | Fixit jquery plugin can be used to fix the element at a certain position when the webpage is scrolled and the element is to be hidden, so that the element stay visible on the webpage.
 10 | By passing the values of the different options provided, one can control the element.
 11 | This easy to use plugin prevent one from dealing with the jquery/javascript code.
 12 | 
 13 | ## Install : 
 14 | 
 15 | ````
 16 | npm install fix-it
 17 | ````
 18 | 
 19 | ## How to use
 20 | 
 21 | - Include jQuery and fixit.
 22 | 
 23 | ```html
 24 | <script src="jquery.js"></script>
 25 | <script src="jquery.fixit.js"></script>
 26 | ```
 27 | 
 28 | - Give an ID to the target element.(Always give an unique id to target element.)
 29 | 
 30 | ```html
 31 | <div id = "fixthis"> Content to be fixed. </div>
 32 | ```
 33 | 
 34 | - Add class to style the element if you want. (Avoid inline style and style by id for target element.)
 35 | 
 36 | ```html
 37 | <div id = "fixthis" class = "myClass" > Content to be fixed. </div>
 38 | ```
 39 | 
 40 | - Call fixit.
 41 | 
 42 | ```html
 43 | <script>
 44 |   $(document).ready(function(){
 45 |     $("#fixthis").fixit();
 46 |   });
 47 | </script>
 48 | ```
 49 | 
 50 | - You are done.
 51 | 
 52 | ## Options
 53 | 
 54 | Following are the different options which can be passed to the function to control the target element.
 55 | 
 56 | - `topMargin`: (default: `0`) Margin in pixels between the page top and the element's top when it is fixed.
 57 | 
 58 | ```html
 59 | <script>
 60 |   $(document).ready(function(){
 61 |     $("#fixthis").fixit({topMargin:10});
 62 |   });
 63 | </script>
 64 | ```
 65 | 
 66 | - `addClassAfter`: (default: `'null'`) Name of the class which will be added to the element when "fixed". This class will be removed when the element is "unfixed".
 67 | 
 68 | ```html
 69 | <script>
 70 |   $(document).ready(function(){
 71 |     $("#fixthis").fixit({topMargin:10, addClassAfter:"classToAdd"});
 72 |   });
 73 | </script>
 74 | ```
 75 | 
 76 | - `sameDimension`: (default: `'true'`) Boolean value determining if the dimension of the element should be same after it is fixed. If any class name is passed, the values of width and height in the class will be ignored, if 'true'.
 77 | 
 78 | ```html
 79 | <script>
 80 |   $(document).ready(function(){
 81 |     $("#fixthis").fixit({topMargin:10, addClassAfter:"classToAdd", sameDimension:true});
 82 |   });
 83 | </script>
 84 | ```
 85 | 
 86 | - `zIndex`: (default: `0`) z-index value of the target element after it is fixed.
 87 | 
 88 | ```html
 89 | <script>
 90 |   $(document).ready(function(){
 91 |     $("#fixthis").fixit({topMargin:10, addClassAfter:"classToAdd", sameDimension:true, zIndex : 50});
 92 |   });
 93 | </script>
 94 | ```
 95 | 
 96 | ## Events
 97 | 
 98 | Following are the custom events which are triggered.
 99 | 
100 | - `fixed`: When the element get fixed.
101 | 
102 | ```html
103 | <script>
104 |   $(document).ready(function(){
105 |     $("#fixthis").fixit();
106 |     $("#fixthis").on("fixed",function(){
107 | 		  // 	Things to do....
108 | 	  });
109 |   });
110 | </script>
111 | ```
112 | 
113 | - `unfixed`: When the element is back to its original location.
114 | 
115 | ```html
116 | <script>
117 |   $(document).ready(function(){
118 |     $("#fixthis").fixit();
119 |     $("#fixthis").on("unfixed",function(){
120 | 		  // 	Things to do....
121 | 	  });
122 |   });
123 | </script>
124 | ```
125 | 
126 | 


--------------------------------------------------------------------------------
/jquery.fixit.js:
--------------------------------------------------------------------------------
 1 | // Fixit Plugin v1.0.1 for jQuery
 2 | // ==============================
 3 | // Author: Prakash Sharma
 4 | // Created: 05/06/2016
 5 | // Website: https://github.com/itsprakash87/fixit
 6 | // Description: 
 7 | // Fix any element on the page according to the options passed.
 8 | // You can also add class to the element when it is fixed.
 9 | // It also trigger events when element is "fixed" and "unfixed".
10 | 
11 | (function ($) {
12 | 	var fixedElementCount = 0;
13 | 
14 | 	$.fn.fixit = function (options) {
15 | 
16 | 		// Default values.
17 | 		var settings = $.extend({
18 | 			topMargin: 0,
19 | 			offset: 0,
20 | 			addClassAfter: null,
21 | 			sameDimension: true,
22 | 			zIndex: 0,
23 | 			reset: false,
24 | 			direction: false,
25 | 		}, options);
26 | 
27 | 		$(this).each(function (index, element) {
28 | 			var $w = $(window);
29 | 			var $el = $(element);
30 | 			var actualTopPosition = 0;
31 | 			var previousScroll = 0;
32 | 			var rightDirection = !settings.direction;
33 | 
34 | 			$w.scroll(function () {
35 | 
36 | 				if (settings.direction) {
37 | 					var currentScroll = $(this).scrollTop();
38 | 
39 | 					if(settings.direction !== "down" || settings.direction !== "up"){
40 | 						rightDirection = true;
41 | 					}
42 | 					else if (currentScroll > previousScroll) {
43 | 						settings.direction == "down" ? rightDirection = true : rightDirection = false;
44 | 					} else {
45 | 						settings.direction == "up" ? rightDirection = true : rightDirection = false;
46 | 					}
47 | 
48 | 					previousScroll = currentScroll;
49 | 				}
50 | 
51 | 				// Get element's and scroll positions.
52 | 				var currentTopPosition = $el.offset().top;
53 | 				var scrollPosition = $w.scrollTop() + settings.topMargin;
54 | 				
55 | 				// Get height and width of element.
56 | 				var elementWidth = $el.outerWidth();
57 | 				var elementHeight = $el.outerHeight();
58 | 
59 | 				if ($el.css("position") !== "fixed" && scrollPosition > (currentTopPosition + settings.offset) && rightDirection && settings.reset === false) {
60 | 					// Fix the element.
61 | 					$el.css("position", "fixed");
62 | 					$el.css("top", "" + settings.topMargin + "px");
63 | 					$el.css("z-index", "" + settings.zIndex);
64 | 
65 | 					if (settings.sameDimension) {
66 | 						$el.css("width", elementWidth);
67 | 						$el.css("height", elementHeight);
68 | 					}
69 | 					// Add a dummy placeholder element at the place of the element so that after getting fixed, the space is not occupied by the next element.
70 | 					$("<div id = 'remove_" + fixedElementCount + "' class='" + ($el.attr("class")) + "' style = 'width:" + (elementWidth) + "px;height:" + (elementHeight) + "px;opacity:0;'></div>").insertAfter($el);
71 | 
72 | 					if (settings.addClassAfter != null) {
73 | 						$el.addClass(settings.addClassAfter);
74 | 					}
75 | 					actualTopPosition = currentTopPosition;
76 | 					fixedElementCount++;
77 | 					$el.trigger("fixed");
78 | 				}
79 | 				else if ($el.css("position") === "fixed" && scrollPosition <= actualTopPosition || settings.reset === true || !rightDirection) {
80 | 					// Unfix the element.
81 | 					fixedElementCount--;
82 | 					// Remove the corresponding dummy placeholder element.
83 | 					$("#remove_" + fixedElementCount).remove();
84 | 					$el.removeAttr("style");
85 | 					if (settings.addClassAfter != null) {
86 | 						$el.removeClass(settings.addClassAfter);
87 | 					}
88 | 					$el.trigger("unfixed");
89 | 				}
90 | 			});
91 | 			return $el;
92 | 		});
93 | 	};
94 | 
95 | })(jQuery);
96 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "fix-it",
 3 |   "version": "1.0.2",
 4 |   "description": "Fix any element on the webpage",
 5 |   "main": "jquery.fixit.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/itsprakash87/fixit"
12 |   },
13 |   "keywords": [
14 |     "jquery",
15 |     "jquery-plugin",
16 |     "sticky",
17 |     "fix",
18 |     "fixit",
19 |     "fix-it"
20 |   ],
21 |   "author": "Prakash Sharma",
22 |   "license": "MIT",
23 |   "bugs": {
24 |     "url": "https://github.com/itsprakash87/fixit/issues"
25 |   },
26 |   "homepage": "https://github.com/itsprakash87/fixit"
27 | }


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