首頁 > web前端 > js教程 > jQuery scrollFix滾動定位外掛_javascript技巧

jQuery scrollFix滾動定位外掛_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
發布: 2016-05-16 16:06:26
原創
1425 人瀏覽過

當使用者向上或向下捲動頁面到一定位置時,目標元素開始固定定位(position:fixed),當回滾到原位置時目標元素恢復到原狀態,可以自訂觸發滾動相對螢幕位置和觸發滾動方向,相容於IE6

【外掛參數】

$(".target_element").scrollFix( [ "top" | "bottom" | length(可以為負,表示相對bottom), [ "top" | "bottom" ] ]);

第一個參數: 可選,預設為"top",當目標元素到了螢幕相對的位置時開始觸發固定,可以填一個數值,如100,-200 ,負值表示相對於螢幕下方

第一個參數: 可選,預設為"top",表示觸發固定的滾動方向,"top"表示從上向下滾動時觸發,"bottom"表示從下向上滾動時觸發

【下載外掛】scrollFix(jb51.net).rar

複製程式碼 程式碼如下:



【程式碼範例】



$("#a").scrollFix(-200);
捲動到距離下面200px時開始固定,預設從上到下觸發


 


$("#b").scrollFix(200,"bottom");
捲動到距離上面200px時開始固定,指定"bottom"從​​下往上觸發


 


$("#c").scrollFix("top","top");
捲動到距離上面0時開始固定,指定"top"從上到下觸發


 


$("#d").scrollFix("bottom","top");
捲動到距離下面0時開始固定,指定"bottom"從​​下往上觸發




實作代碼:
複製程式碼 程式碼如下:


核心程式碼:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

;(function($) {

 jQuery.fn.scrollFix = function(height, dir) {

  height = height || 0;

  height = height == "top" ? 0 : height;

  return this.each(function() {

   if (height == "bottom") {

    height = document.documentElement.clientHeight - this.scrollHeight;

   } else if (height < 0) {

    height = document.documentElement.clientHeight - this.scrollHeight + height;

   }

   var that = $(this),

    oldHeight = false,

    p, r, l = that.offset().left;

   dir = dir == "bottom" &#63; dir : "top"; //默认滚动方向向下

   if (window.XMLHttpRequest) { //非ie6用fixed

 

 

    function getHeight() { //>=0表示上面的滚动高度大于等于目标高度

     return (document.documentElement.scrollTop || document.body.scrollTop) + height - that.offset().top;

    }

    $(window).scroll(function() {

     if (oldHeight === false) {

      if ((getHeight() >= 0 && dir == "top") || (getHeight() <= 0 && dir == "bottom")) {

       oldHeight = that.offset().top - height;

       that.css({

        position: "fixed",

        top: height,

        left: l

       });

      }

     } else {

      if (dir == "top" && (document.documentElement.scrollTop || document.body.scrollTop) < oldHeight) {

       that.css({

        position: "static"

       });

       oldHeight = false;

      } else if (dir == "bottom" && (document.documentElement.scrollTop || document.body.scrollTop) > oldHeight) {

       that.css({

        position: "static"

       });

       oldHeight = false;

      }

     }

    });

   } else { //for ie6

    $(window).scroll(function() {

     if (oldHeight === false) { //恢复前只执行一次,减少reflow

      if ((getHeight() >= 0 && dir == "top") || (getHeight() <= 0 && dir == "bottom")) {

       oldHeight = that.offset().top - height;

       r = document.createElement("span");

       p = that[0].parentNode;

       p.replaceChild(r, that[0]);

       document.body.appendChild(that[0]);

       that[0].style.position = "absolute";

      }

     } else if ((dir == "top" && (document.documentElement.scrollTop || document.body.scrollTop) < oldHeight) || (dir == "bottom" && (document.documentElement.scrollTop || document.body.scrollTop) > oldHeight)) { //结束

      that[0].style.position = "static";

      p.replaceChild(that[0], r);

      r = null;

      oldHeight = false;

     } else { //滚动

      that.css({

       left: l,

       top: height + document.documentElement.scrollTop

      })

     }

    });

   }

  });

 };

})(jQuery);

登入後複製
相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板