這篇文章主要介紹了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);