portal html css js resource

scrollfix.js 7.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. (function($) {
  2. //URI:http://caibaojian.com/scrollfix
  3. //author:caibaojian
  4. //website:http://caibaojian.com
  5. //descirption:scroll and fixed some div
  6. $.fn.scrollFix = function(options) {
  7. return this.each(function() {
  8. var opts = $.extend({}, $.fn.scrollFix.defaultOptions, options);
  9. var obj = $(this),
  10. base = this,
  11. selfTop = 0,
  12. selfLeft = 0,
  13. toTop = 0,
  14. parentOffsetLeft = 0,
  15. parentOffsetTop = 0,
  16. outerHeight,
  17. outerWidth,
  18. objWidth = 0,
  19. oflag=opts.oflag,
  20. placeholder = jQuery('<div>'), //创建一个jquery对象
  21. optsTop = opts.distanceTop, //定义到顶部的高度
  22. endfix = 0; //开始停止固定的位置
  23. var originalPosition;
  24. var originalOffsetTop;
  25. var originalZIndex;
  26. var lastOffsetLeft = -1;
  27. var isUnfixed = true;
  28. var o_h =(window.document.body || window.document.documentElement).scrollHeight;
  29. //如果没有找到节点,不进行处理
  30. if (obj.length <= 0) {
  31. return;
  32. }
  33. if (lastOffsetLeft == -1) {
  34. originalZIndex = obj.css('z-index');
  35. position = obj.css('position');
  36. originalPosition = obj.css('position');
  37. originalOffsetTop = obj.css('top');
  38. }
  39. var zIndex = obj.css('zIndex');
  40. if (opts.zIndex != 0) {
  41. zIndex = opts.zIndex;
  42. }
  43. //获取相对定位或者绝对定位的父类
  44. var parents = obj.parent();
  45. var Position = parents.css('position');
  46. while (!/^relative|absolute$/i.test(Position)) { //检测浮动元素的父类元素定位为'relative'或者'absolute',是的话退出,否则的话,执行循环,继续寻找它的父类
  47. parents = parents.parent();
  48. Position = parents.css('position');
  49. if (/^body|html$/i.test(parents[0].tagName)) break; //假如父类元素的标签为body或者HTML,说明没有找到父类为以上的定位,退出循环
  50. }
  51. var ie6 = !-[1, ] && !window.XMLHttpRequest; //兼容IE6
  52. var resizeWindow = false;
  53. function resetScroll() {
  54. setUnfixed();
  55. selfTop = obj.offset().top; //对象距离顶部高度
  56. selfLeft = obj.offset().left; //对象距离左边宽度
  57. outerHeight = obj.outerHeight(); //对象高度
  58. outerHeight = parseFloat(outerHeight) + parseFloat(obj.css('marginBottom').replace(/auto/, 0));
  59. outerWidth = obj.outerWidth(); //对象外宽度
  60. //objWidth = obj.width();
  61. objWidth = obj.outerWidth(true);
  62. var documentHeight = $(document).height(); //文档高度
  63. var startTop = $(opts.startTop), //开始浮动固定对象
  64. startBottom = $(opts.startBottom),
  65. toBottom, //停止滚动位置距离底部的高度
  66. ScrollHeight; //对象滚动的高度
  67. //计算父类偏移值
  68. if (/^body|html$/i.test(parents[0].tagName)) { //当父类元素非body或者HTML时,说明找到了一个父类为'relative'或者'absolute'的元素,得出它的偏移高度
  69. parentOffsetTop = 0, parentOffsetLeft = 0;
  70. } else {
  71. parentOffsetLeft = parents.offset().left, parentOffsetTop = parents.offset().top;
  72. }
  73. // 计算父节点的上边到顶部距离
  74. // 如果 body 有 top 属性, 消除这些位移
  75. var bodyToTop = parseInt(jQuery('body').css('top'), 10);
  76. if (!isNaN(bodyToTop)) {
  77. optsTop += bodyToTop;
  78. }
  79. //计算停在底部的距离
  80. if (!isNaN(opts.endPos)) {
  81. toBottom = opts.endPos;
  82. } else {
  83. toBottom = parseFloat(documentHeight - $(opts.endPos).offset().top);
  84. }
  85. //计算需要滚动的高度以及停止滚动的高度
  86. ScrollHeight = parseFloat(documentHeight - toBottom - optsTop), endfix = parseFloat(ScrollHeight - outerHeight);
  87. //计算顶部的距离值
  88. if (startTop[0]) {
  89. var startTopOffset = startTop.offset(),
  90. startTopPos = startTopOffset.top;
  91. selfTop = startTopPos;
  92. }
  93. if (startBottom[0]) {
  94. var startBottomOffset = startBottom.offset(),
  95. startBottomPos = startBottomOffset.top,
  96. startBottomHeight = startBottom.outerHeight();
  97. selfTop = parseFloat(startBottomPos + startBottomHeight);
  98. }
  99. toTop = selfTop - optsTop;
  100. toTop = (toTop > 0) ? toTop : 0;
  101. var selfBottom = documentHeight - selfTop - outerHeight;
  102. //如果滚动停在底部的值不为0,并且自身到底部的高度小于上面这个值,不执行浮动固定
  103. if ((toBottom != 0) && (selfBottom <= toBottom)) {
  104. return;
  105. }
  106. }
  107. function setUnfixed() {
  108. if (!isUnfixed) {
  109. lastOffsetLeft = -1;
  110. placeholder.css("display", "none");
  111. obj.css({
  112. 'z-index': originalZIndex,
  113. 'width': '',
  114. 'position': originalPosition,
  115. 'left': '',
  116. 'top': originalOffsetTop,
  117. 'margin-left': ''
  118. });
  119. obj.removeClass('scrollfixed');
  120. isUnfixed = true;
  121. }
  122. }
  123. function onScroll() {
  124. lastOffsetLeft = 1;
  125. var ScrollTop = $(window).scrollTop();
  126. if (opts.bottom != -1) {
  127. ScrollTop = ScrollTop + $(window).height() - outerHeight - opts.bottom;
  128. }
  129. if (ScrollTop > toTop && (ScrollTop < endfix)) {
  130. if (ie6) { //IE6则使用这个样式
  131. obj.addClass(opts.baseClassName).css({
  132. "z-index": zIndex,
  133. "position": "absolute",
  134. "top": opts.bottom == -1 ? ScrollTop + optsTop - parentOffsetTop : ScrollTop - parentOffsetTop,
  135. "bottom": 'auto',
  136. "left": selfLeft - parentOffsetLeft,
  137. 'width': objWidth
  138. })
  139. } else {
  140. obj.addClass(opts.baseClassName).css({
  141. "z-index": zIndex,
  142. "position": "fixed",
  143. "top": opts.bottom == -1 ? optsTop : '',
  144. "bottom": opts.bottom == -1 ? '' : opts.bottom,
  145. "left": selfLeft,
  146. "width": objWidth
  147. });
  148. }
  149. placeholder.css({
  150. 'height': outerHeight,
  151. 'width': outerWidth,
  152. 'display': 'block'
  153. }).insertBefore(obj);
  154. } else if (ScrollTop >= endfix) {
  155. obj.addClass(opts.baseClassName).css({
  156. "z-index": zIndex,
  157. "position": "absolute",
  158. "top":oflag?(endfix - parentOffsetTop + optsTop - 20):(endfix - parentOffsetTop + optsTop),
  159. 'bottom': '',
  160. "left": selfLeft - parentOffsetLeft,
  161. "width": objWidth
  162. });
  163. placeholder.css({
  164. 'height': outerHeight,
  165. 'width': outerWidth,
  166. 'display': 'block'
  167. }).insertBefore(obj)
  168. } else {
  169. obj.removeClass(opts.baseClassName).css({
  170. "z-index": originalZIndex,
  171. "position": "static",
  172. "top": "",
  173. "bottom": "",
  174. "left": ""
  175. });
  176. placeholder.remove()
  177. }
  178. }
  179. var Timer = 0;
  180. // if (isUnfixed) {
  181. resetScroll();
  182. // }
  183. $(window).on("scroll", function() {
  184. var n_h=(window.document.body || window.document.documentElement).scrollHeight;
  185. if (Timer) {
  186. clearTimeout(Timer);
  187. }
  188. if(n_h === o_h){
  189. Timer = setTimeout(onScroll, 0);
  190. }else{
  191. o_h = n_h;
  192. Timer = setTimeout(function(){
  193. isUnfixed=false;
  194. resetScroll();
  195. onScroll();
  196. },0);
  197. }
  198. });
  199. // 当发现调整屏幕大小时,重新执行代码
  200. $(window).on("resize", function() {
  201. if (Timer) {
  202. clearTimeout(Timer);
  203. }
  204. Timer = setTimeout(function() {
  205. isUnfixed = false;
  206. resetScroll();
  207. onScroll();
  208. }, 0);
  209. });
  210. })
  211. }
  212. $.fn.scrollFix.defaultOptions = {
  213. oflag:false,//如果有这个,距离底部有20px距离,默认为false
  214. startTop: null, //滑到这个位置顶部时开始浮动,默认为空
  215. startBottom: null, //滑到这个位置末端开始浮动,默认为空
  216. distanceTop: 0, //固定在顶部的高度
  217. endPos: 0, //停靠在底部的位置,可以为jquery对象
  218. bottom: -1, //底部位置
  219. zIndex: 0, //z-index值
  220. baseClassName: 'scrollfixed' //开始固定时添加的类
  221. };
  222. })(jQuery);