|
Lines 1-73
Link Here
|
| 1 |
/* Source: http://www.webspeaks.in/2011/07/new-gmail-like-floating-toolbar-jquery.html |
|
|
| 2 |
Revision: http://jsfiddle.net/pasmalin/AyjeZ/ |
| 3 |
*/ |
| 4 |
(function ($, window) { |
| 5 |
"use strict"; |
| 6 |
$.fn.fixFloat = function (options) { |
| 7 |
var options = options || {}; |
| 8 |
var tbh = $(this); |
| 9 |
var defaults = { |
| 10 |
enabled: true, |
| 11 |
originalOffset: tbh.offset().top, |
| 12 |
originalPosition: tbh.position().top, |
| 13 |
}; |
| 14 |
var originalOffset = typeof options.originalOffset === 'undefined' |
| 15 |
? defaults.originalOffset |
| 16 |
: options.originalOffset; |
| 17 |
|
| 18 |
var originalPosition = typeof options.originalPosition === 'undefined' |
| 19 |
? defaults.originalPosition |
| 20 |
: options.originalPosition; |
| 21 |
|
| 22 |
options = $.extend(defaults, options); |
| 23 |
|
| 24 |
if (tbh.css('position') !== 'absolute') { |
| 25 |
var tbhBis = tbh.clone(); |
| 26 |
tbhBis.css({ |
| 27 |
"display": tbh.css("display"), |
| 28 |
"visibility": "hidden" |
| 29 |
}); |
| 30 |
tbhBis.width(tbh.innerWidth(true)); |
| 31 |
tbhBis.height(tbh.height()); |
| 32 |
tbhBis.attr('id', tbh.attr('id')+'Bis'); // Avoid 2 elts with the same id |
| 33 |
tbh.after(tbhBis); |
| 34 |
tbh.width(tbh.width()); |
| 35 |
tbh.css({ |
| 36 |
'position': 'absolute', |
| 37 |
'top': originalPosition, |
| 38 |
}); |
| 39 |
} |
| 40 |
|
| 41 |
if (options.enabled) { |
| 42 |
$(window).scroll(function () { |
| 43 |
var offsetTop = tbh.offset().top; |
| 44 |
|
| 45 |
var s = parseInt($(window).scrollTop(), 10); |
| 46 |
|
| 47 |
var fixMe = (s > offsetTop); |
| 48 |
var repositionMe = (s < originalOffset); |
| 49 |
if (fixMe) { |
| 50 |
tbh.css({ |
| 51 |
'position': 'fixed', |
| 52 |
'top': '0', |
| 53 |
'z-index': '1000' |
| 54 |
}); |
| 55 |
tbh.addClass("floating"); |
| 56 |
} |
| 57 |
if (repositionMe) { |
| 58 |
tbh.css({ |
| 59 |
'position': 'absolute', |
| 60 |
'top': originalPosition, |
| 61 |
'z-index': '1' |
| 62 |
}); |
| 63 |
tbh.removeClass("floating"); |
| 64 |
} |
| 65 |
}); |
| 66 |
|
| 67 |
$(window).resize(function() { |
| 68 |
var p = $(tbh).parents('div').first(); |
| 69 |
$(tbh).width(p.width()-10); |
| 70 |
}); |
| 71 |
} |
| 72 |
}; |
| 73 |
})(jQuery, window); |
| 74 |
- |