jQuery scrollFix滚动定位插件

这篇文章主要介绍了jQuery scrollFix滚动定位插件,当用户向上或向下滚动页面到一定位置时，目标元素开始固定定位(position:fixed)，当回滚到原位置时目标元素恢复到原状态，需要的朋友可以参考下

当用户向上或向下滚动页面到一定位置时，目标元素开始固定定位(position:fixed)，当回滚到原位置时目标元素恢复到原状态，可以定制触发滚动相对屏幕位置和触发滚动方向，兼容IE6

【插件参数】

$(".target_element").scrollFix( [ "top" | "bottom" | length(可以为负,表示相对bottom), [ "top" | "bottom" ] ]);

第一个参数： 可选，默认为"top"，当目标元素到了屏幕相对的位置时开始触发固定，可以填一个数值，如100,-200 ,负值表示相对于屏幕下方

第一个参数： 可选，默认为"top"，表示触发固定的滚动方向，"top"表示从上向下滚动时触发，"bottom"表示从下向上滚动时触发

实现代码：

核心代码：

1. ;(function($) { 
2. jQuery.fn.scrollFix = function(height, dir) { 
3. height = height || 0; 
4. height = height == "top" ? 0 : height; 
5. return this.each(function() { 
6. if (height == "bottom") { 
7. height = document.documentElement.clientHeight - this.scrollHeight; 
8. } else if (height < 0) { 
9. height = document.documentElement.clientHeight - this.scrollHeight + height; 
10. } 
11. var that = $(this), 
12. oldHeight = false, 
13. p, r, l = that.offset().left; 
14. dir = dir == "bottom" ? dir : "top"; //默认滚动方向向下 
15. if (window.XMLHttpRequest) { //非ie6用fixed 
16.  
17.  
18. function getHeight() { //>=0表示上面的滚动高度大于等于目标高度 
19. return (document.documentElement.scrollTop || document.body.scrollTop) + height - that.offset().top; 
20. } 
21. $(window).scroll(function() { 
22. if (oldHeight === false) { 
23. if ((getHeight() >= 0 && dir == "top") || (getHeight() <= 0 && dir == "bottom")) { 
24. oldHeight = that.offset().top - height; 
25. that.css({ 
26. position: "fixed", 
27. top: height, 
28. left: l 
29. }); 
30. } 
31. } else { 
32. if (dir == "top" && (document.documentElement.scrollTop || document.body.scrollTop) < oldHeight) { 
33. that.css({ 
34. position: "static" 
35. }); 
36. oldHeight = false; 
37. } else if (dir == "bottom" && (document.documentElement.scrollTop || document.body.scrollTop) > oldHeight) { 
38. that.css({ 
39. position: "static" 
40. }); 
41. oldHeight = false; 
42. } 
43. } 
44. }); 
45. } else { //for ie6 
46. $(window).scroll(function() { 
47. if (oldHeight === false) { //恢复前只执行一次，减少reflow 
48. if ((getHeight() >= 0 && dir == "top") || (getHeight() <= 0 && dir == "bottom")) { 
49. oldHeight = that.offset().top - height; 
50. r = document.createElement("span"); 
51. p = that[0].parentNode; 
52. p.replaceChild(r, that[0]); 
53. document.body.appendChild(that[0]); 
54. that[0].style.position = "absolute"; 
55. } 
56. } else if ((dir == "top" && (document.documentElement.scrollTop || document.body.scrollTop) < oldHeight) || (dir == "bottom" && (document.documentElement.scrollTop || document.body.scrollTop) > oldHeight)) { //结束 
57. that[0].style.position = "static"; 
58. p.replaceChild(that[0], r); 
59. r = null; 
60. oldHeight = false; 
61. } else { //滚动 
62. that.css({ 
63. left: l, 
64. top: height + document.documentElement.scrollTop 
65. }) 
66. } 
67. }); 
68. } 
69. }); 
70. }; 
71. })(jQuery);