jquery.stickyPanel.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. /*
  2. * jQuery.stickyPanel
  3. * ----------------------
  4. * version: 1.4.1
  5. * date: 7/21/11
  6. *
  7. * Copyright (c) 2011 Donny Velazquez
  8. * http://donnyvblog.blogspot.com/
  9. * http://code.google.com/p/sticky-panel/
  10. *
  11. * Licensed under the Apache License 2.0
  12. *
  13. */
  14. (function ($) {
  15. $.fn.stickyPanel = function (options) {
  16. var options = $.extend({}, $.fn.stickyPanel.defaults, options);
  17. return this.each(function () {
  18. $(window).bind("scroll.stickyPanel", { selected: $(this), options: options }, Scroll);
  19. });
  20. };
  21. function Scroll(event) {
  22. var node = event.data.selected;
  23. var o = event.data.options;
  24. var isMobile = navigator.userAgent.toLowerCase().indexOf('mobile') > 0;
  25. var windowHeight = $(window).height();
  26. var nodeHeight = node.outerHeight(true);
  27. var scrollTop = $(document).scrollTop();
  28. // when top of window reaches the top of the panel detach
  29. if (!isMobile &&
  30. scrollTop <= $(document).height() - windowHeight && // Fix for rubberband scrolling in Safari on Lion
  31. scrollTop > node.offset().top - o.topPadding) {
  32. // topPadding
  33. var newNodeTop = 0;
  34. if (o.topPadding != "undefined") {
  35. newNodeTop = newNodeTop + o.topPadding;
  36. }
  37. // get left before adding spacer
  38. var nodeLeft = node.offset().left;
  39. // save panels top
  40. node.data("PanelsTop", node.offset().top - newNodeTop);
  41. // MOVED: savePanelSpace before afterDetachCSSClass to handle afterDetachCSSClass changing size of node
  42. // savePanelSpace
  43. if (o.savePanelSpace == true) {
  44. var nodeWidth = node.outerWidth(true);
  45. var nodeCssfloat = node.css("float");
  46. var nodeCssdisplay = node.css("display");
  47. var randomNum = Math.ceil(Math.random() * 9999); /* Pick random number between 1 and 9999 */
  48. node.data("PanelSpaceID", "stickyPanelSpace" + randomNum);
  49. node.before("<div id='" + node.data("PanelSpaceID") + "' style='width:" + nodeWidth + "px;height:" + nodeHeight + "px;float:" + nodeCssfloat + ";display:" + nodeCssdisplay + ";'>&nbsp;</div>");
  50. }
  51. // afterDetachCSSClass
  52. if (o.afterDetachCSSClass != "") {
  53. node.addClass(o.afterDetachCSSClass);
  54. }
  55. // save inline css
  56. node.data("Original_Inline_CSS", (!node.attr("style") ? "" : node.attr("style")));
  57. // detach panel
  58. node.css({
  59. "margin": 0,
  60. "left": nodeLeft,
  61. "top": newNodeTop,
  62. "position": "fixed"
  63. });
  64. }
  65. // ADDED: css top check to avoid continuous reattachment
  66. if (scrollTop <= node.data("PanelsTop") && node.css("top") != "auto") {
  67. if (o.savePanelSpace == true) {
  68. $("#" + node.data("PanelSpaceID")).remove();
  69. }
  70. // attach panel
  71. node.attr("style", node.data("Original_Inline_CSS"));
  72. if (o.afterDetachCSSClass != "") {
  73. node.removeClass(o.afterDetachCSSClass);
  74. }
  75. }
  76. };
  77. $.fn.stickyPanel.defaults = {
  78. topPadding: 0,
  79. // Use this to set the top margin of the detached panel.
  80. afterDetachCSSClass: "",
  81. // This class is applied when the panel detaches.
  82. savePanelSpace: false
  83. // When set to true the space where the panel was is kept open.
  84. };
  85. })(jQuery);