Merge pull request #21 from JeffenCheung/master

Create bottom-sticker.js
rubynor · Apr 18, 2018 · bc814d2 · bc814d2
2 parents b68c394 + 5c9a025
commit bc814d2
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -38,11 +38,12 @@ add the css class 'table-fixed-header' to your table. Add the class 'header' to
         %tr
           %td val3
           %td val4
+    %div.bottom-sticker
 
 Trigger the header freeze with this:
 
     $('.table-fixed-header').fixedHeader()
-
+    $('.bottom-sticker').bottomSticker()
 
 #Credits
 

diff --git a/bottom-sticker.js b/bottom-sticker.js
@@ -0,0 +1,63 @@
+/*!
+ * bootm sticker
+ * Copyright 2016-2020 Pactear.
+ * Licensed under the MIT license
+ * @author JeffenCheung@gmail.com
+ * @date 2016-4-8
+ * @version 0.0.1
+ */
+(function($) {
+
+$.fn.bottomSticker = function (options) {
+	var config = {
+		bottom: '0px',
+		width: '100%'
+	};
+	if (options){ $.extend(config, options); }
+
+	return this.each( function() {
+		var o = $(this)
+			, cId = o.attr("id") + "-copy";
+		var c = "." + cId;
+
+		var $win = $(window)
+			, isFixed = 0;
+
+		function processScroll() {
+			var scrollTop = $win.scrollTop()
+					, cTop = $(c).offset().top
+					, oTop = o.offset().top;
+			if (oTop > cTop && !isFixed) {
+				isFixed = 1;
+			} else if (oTop <= cTop && isFixed) {
+				isFixed = 0;
+			}
+
+			isFixed ? $(c).show().width(getWidth())
+			        : $(c).hide();
+
+		}
+		function getWidth() {
+			var width = o.width();
+			if (width == 0)
+				width = config['width'];
+			return width;
+		}
+
+		$win.on('scroll', processScroll);
+		$win.on('resize', processScroll);
+
+		var clone =  o.clone(true)
+			.attr("id", cId)
+			.addClass(cId)
+			.css({'position': 'fixed'
+				, 'bottom': config['bottom']
+				, 'width': getWidth()});
+			o.after(clone);
+
+		processScroll();
+
+	}); // return each
+};
+
+})(jQuery);
diff --git a/bottom-sticker.min.js b/bottom-sticker.min.js
@@ -0,0 +1,9 @@
+/*!
+ * bootm sticker
+ * Copyright 2016-2020 Pactear.
+ * Licensed under the MIT license
+ * @author JeffenCheung@gmail.com
+ * @date 2016-4-8
+ * @version 0.0.1
+ */
+(function(a){a.fn.bottomSticker=function(c){var b={bottom:"0px",width:"100%"};if(c){a.extend(b,c)}return this.each(function(){var h=a(this),e=h.attr("id")+"-copy";var k="."+e;var j=a(window),g=0;function f(){var n=j.scrollTop(),m=a(k).offset().top,l=h.offset().top;if(l>m&&!g){g=1}else{if(l<=m&&g){g=0}}g?a(k).show().width(d()):a(k).hide()}function d(){var l=h.width();if(l==0){l=b.width}return l}j.on("scroll",f);j.on("resize",f);var i=h.clone(true).attr("id",e).addClass(e).css({position:"fixed",bottom:b.bottom,width:d()});h.after(i);f()})}})(jQuery);
diff --git a/example.html b/example.html
@@ -8,6 +8,7 @@
     <!-- CSS and JS for table fixed header -->
     <link href='table-fixed-header.css' rel='stylesheet'>
     <script src='table-fixed-header.js'></script>
+    <script src='bottom-sticker.js'></script>
     <script src='duplicate_rows.js'></script>
   </head>
   <body>
@@ -87,10 +88,16 @@ <h1>Table Fixed Header</h1>
           </tr>
         </tbody>
       </table>
+
+      <div class="form-actions" id="bottom-sticker">
+	      <input id="btnSubmit" class="btn btn-primary" type="submit" value="Save"/>
+	      <input id="btnCancel" class="btn" type="button" value="Back" onclick="history.go(-1)"/>
+	  </div>
     </div>
     <script language='javascript' type='text/javascript'>
       $(document).ready(function(){
-      $('.table-fixed-header').fixedHeader();
+        $('.table-fixed-header').fixedHeader();
+        $("#bottom-sticker").bottomSticker();
       });
     </script>
   </body>