|
Lines 1-68
Link Here
|
| 1 |
/* Source: http://www.webspeaks.in/2011/07/new-gmail-like-floating-toolbar-jquery.html |
1 |
/* Source: http://www.webspeaks.in/2011/07/new-gmail-like-floating-toolbar-jquery.html |
| 2 |
Revision: http://jsfiddle.net/pasmalin/AyjeZ/ |
2 |
Revision: http://jsfiddle.net/pasmalin/AyjeZ/ |
| 3 |
*/ |
3 |
*/ |
| 4 |
(function($){ |
4 |
(function ($, window) { |
| 5 |
$.fn.fixFloat = function(options){ |
5 |
"use strict"; |
|
|
6 |
$.fn.fixFloat = function (options) { |
| 7 |
var defaults = { |
| 8 |
enabled: true |
| 9 |
}; |
| 10 |
options = $.extend(defaults, options); |
| 11 |
var tbh = $(this); |
| 12 |
var originalOffset = tbh.position().top; |
| 6 |
|
13 |
|
| 7 |
var defaults = { |
14 |
if (tbh.css('position') !== 'absolute') { |
| 8 |
enabled: true |
15 |
var tbhBis = tbh.clone(); |
| 9 |
}; |
16 |
tbhBis.css({ |
| 10 |
var options = $.extend(defaults, options); |
17 |
"display": tbh.css("display"), |
| 11 |
|
18 |
"visibility": "hidden" |
| 12 |
var offsetTop; /**Distance of the element from the top of window**/ |
19 |
}); |
| 13 |
var s; /**Scrolled distance from the top of window through which we have moved**/ |
20 |
tbhBis.width(tbh.outerWidth(true)); |
| 14 |
var fixMe = true; |
21 |
tbhBis.height(tbh.outerHeight(true)); |
| 15 |
var repositionMe = true; |
22 |
tbh.after(tbhBis); |
| 16 |
|
23 |
tbh.width(tbh.width()); |
| 17 |
var tbh = $(this); |
24 |
var tbl = tbh.find("th,td"); |
| 18 |
var originalOffset = tbh.position().top; /**Get the actual distance of the element from the top mychange:change to position better work**/ |
25 |
if (tbl.length > 0) { |
| 19 |
|
26 |
tbl.each(function () { |
| 20 |
if (tbh.css('position')!='absolute') { |
27 |
var $elt = $(this); |
| 21 |
var tbhBis = $("<div></div>"); |
28 |
$elt.width($elt.outerWidth(true)); |
| 22 |
tbhBis.css({"display":tbh.css("display"),"visibility":"hidden"}); |
29 |
}); |
| 23 |
tbhBis.width(tbh.outerWidth(true)); |
30 |
} |
| 24 |
tbhBis.height(tbh.outerHeight(true)); |
31 |
tbh.css({ |
| 25 |
tbh.after(tbhBis); |
32 |
'position': 'absolute', |
| 26 |
tbh.width(tbh.width()); |
33 |
'top': originalOffset |
| 27 |
tbh.css({'position':'absolute'}); |
34 |
}); |
| 28 |
} |
|
|
| 29 |
|
| 30 |
if(options.enabled){ |
| 31 |
$(window).scroll(function(){ |
| 32 |
var offsetTop = tbh.offset().top; /**Get the current distance of the element from the top **/ |
| 33 |
var s = parseInt($(window).scrollTop(), 10); /**Get the from the top of wondow through which we have scrolled**/ |
| 34 |
var fixMe = true; |
| 35 |
if(s > offsetTop){ |
| 36 |
fixMe = true; |
| 37 |
}else{ |
| 38 |
fixMe = false; |
| 39 |
} |
35 |
} |
|
|
36 |
tbh.css({ |
| 37 |
'z-index': 1000 |
| 38 |
}); |
| 40 |
|
39 |
|
| 41 |
if(s < originalOffset){ |
40 |
if (options.enabled) { |
| 42 |
repositionMe = true; |
41 |
$(window).scroll(function () { |
| 43 |
}else{ |
42 |
var offsetTop = tbh.offset().top; |
| 44 |
repositionMe = false; |
43 |
var s = parseInt($(window).scrollTop(), 10); |
|
|
44 |
var fixMe = (s > offsetTop); |
| 45 |
var repositionMe = (s < originalOffset); |
| 46 |
if (fixMe) { |
| 47 |
tbh.css({ |
| 48 |
'position': 'fixed', |
| 49 |
'top': '0' |
| 50 |
}); |
| 51 |
} |
| 52 |
if (repositionMe) { |
| 53 |
tbh.css({ |
| 54 |
'position': 'absolute', |
| 55 |
'top': originalOffset |
| 56 |
}); |
| 57 |
} |
| 58 |
}); |
| 45 |
} |
59 |
} |
| 46 |
|
60 |
}; |
| 47 |
if(fixMe){ |
61 |
})(jQuery, window); |
| 48 |
var cssObj = { |
|
|
| 49 |
'position' : 'fixed', |
| 50 |
'top' : '0px', |
| 51 |
'z-index' : '1000' |
| 52 |
} |
| 53 |
tbh.css(cssObj); |
| 54 |
tbh.addClass("floating"); |
| 55 |
} |
| 56 |
if(repositionMe){ |
| 57 |
var cssObj = { |
| 58 |
'position' : 'absolute', |
| 59 |
'top' : originalOffset, |
| 60 |
'z-index' : '1' |
| 61 |
} |
| 62 |
tbh.css(cssObj); |
| 63 |
tbh.removeClass("floating"); |
| 64 |
} |
| 65 |
}); |
| 66 |
} |
| 67 |
}; |
| 68 |
})(jQuery); |
| 69 |
- |
|
|