JQuery-Sticky-Table/jquery.stickytable.js at master · armaaar/JQuery-Sticky-Table · GitHub

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
jQuery(document).on('stickyTable', function() {
    var positionStickySupport = (function() {
        var el = document.createElement('a'),
            mStyle = el.style;
        mStyle.cssText = "position:sticky;position:-webkit-sticky;position:-ms-sticky;";
        return mStyle.position.indexOf('sticky')!==-1;
    })();

    var scrollTypeRTL = (function() {
        var definer = $('<div dir="rtl" style="font-size: 14px; width: 4px; height: 1px; position: absolute; top: -1000px; overflow: scroll">ABCD</div>').appendTo('body')[0],
            scrollTypeRTL = 'reverse';

        if (definer.scrollLeft > 0) {
            scrollTypeRTL = 'default';
        } else {
            definer.scrollLeft = 1;
            if (definer.scrollLeft === 0) {
                scrollTypeRTL = 'negative';
            }
        }
        $(definer).remove();
        return scrollTypeRTL;
    })();

    if(positionStickySupport) {
        var offset = 0;
        $(".sticky-table").each( function () {
            offset = 0;
            $(this).find("table tr.sticky-header").each( function () {
                $(this).find("th").css('top', offset);
                $(this).find("td").css('top', offset);
                offset += $(this).outerHeight();
            })

            offset = 0;
            $($(this).find("table tr.sticky-footer").get().reverse()).each( function () {
                $(this).find("th").css('bottom', offset);
                $(this).find("td").css('bottom', offset);
                offset += $(this).outerHeight();
            })
        })

        $(".sticky-ltr-cells table tr").each( function () {
            offset = 0;
            $(this).find(".sticky-cell").each( function () {
                $(this).css('left', offset);
                offset += $(this).outerWidth();
            })

            offset = 0;
            $($(this).find(".sticky-cell-opposite").get().reverse()).each( function () {
                $(this).css('right', offset);
                offset += $(this).outerWidth();
            })
        })
    } else {
        if(navigator.userAgent.match(/Trident\/7\./)) {
            $('.sticky-table').on("mousewheel", function (event) {
                event.preventDefault();
                var wd = event.originalEvent.wheelDelta;
                var csp = $(this).scrollTop();
                $(this).scrollTop(csp - wd);
            });
        }

        $(".sticky-table").scroll(function() {
            $(this).find("table tr.sticky-header th").css('top', $(this).scrollTop());
            $(this).find("table tr.sticky-header td").css('top', $(this).scrollTop());
            var maxScroll = $(this).find("table").prop("clientHeight") - $(this).prop("clientHeight");
            $(this).find("table tr.sticky-footer th").css('bottom', maxScroll - $(this).scrollTop());
            $(this).find("table tr.sticky-footer td").css('bottom', maxScroll - $(this).scrollTop());
        }).scroll();

        $(".sticky-ltr-cells").scroll(function() {
            $(this).find("table th.sticky-cell").css('left', $(this).scrollLeft());
            $(this).find("table td.sticky-cell").css('left', $(this).scrollLeft());
            var maxScroll = $(this).find("table").prop("clientWidth") - $(this).prop("clientWidth");
            $(this).find("table th.sticky-cell-opposite").css('right', maxScroll - $(this).scrollLeft());
            $(this).find("table td.sticky-cell-opposite").css('right', maxScroll - $(this).scrollLeft());
        }).scroll();
    }
    if($(".sticky-rtl-cells").length && !(positionStickySupport && scrollTypeRTL == 'negative')) {
        if(positionStickySupport) {
            $(".sticky-rtl-cells table th.sticky-cell").css('position', "relative");
            $(".sticky-rtl-cells table td.sticky-cell").css('position', "relative");
            $(".sticky-rtl-cells table th.sticky-cell-opposite").css('position', "relative");
            $(".sticky-rtl-cells table td.sticky-cell-opposite").css('position', "relative");

            $(".sticky-table").scroll(function() {
                $(this).find("table tr.sticky-header .sticky-cell").css('top', $(this).scrollTop());
                $(this).find("table tr.sticky-header .sticky-cell-opposite").css('top', $(this).scrollTop());
                var maxScroll = $(this).find("table").prop("clientHeight") - $(this).prop("clientHeight");
                $(this).find("table tr.sticky-footer .sticky-cell").css('bottom', maxScroll - $(this).scrollTop());
                $(this).find("table tr.sticky-footer .sticky-cell-opposite").css('bottom', maxScroll - $(this).scrollTop());
            }).scroll();
        }
        $(".sticky-rtl-cells").scroll(function() {
            var maxScroll = $(this).find("table").prop("clientWidth") - $(this).prop("clientWidth");
            switch(scrollTypeRTL) {
                case "default": // webKit Browsers
                    $(this).find("table th.sticky-cell").css('right', maxScroll - $(this).scrollLeft());
                    $(this).find("table td.sticky-cell").css('right', maxScroll - $(this).scrollLeft());
                    $(this).find("table th.sticky-cell-opposite").css('left', $(this).scrollLeft());
                    $(this).find("table td.sticky-cell-opposite").css('left', $(this).scrollLeft());
                    break;
                case "negative": // Firefox, Opera
                    $(this).find("table th.sticky-cell").css('right', $(this).scrollLeft() * -1);
                    $(this).find("table td.sticky-cell").css('right', $(this).scrollLeft() * -1);
                    $(this).find("table th.sticky-cell-opposite").css('left', maxScroll + $(this).scrollLeft());
                    $(this).find("table td.sticky-cell-opposite").css('left', maxScroll + $(this).scrollLeft());
                    break;
                case "reverse": // IE, Edge
                    $(this).find("table th.sticky-cell").css('right', $(this).scrollLeft());
                    $(this).find("table td.sticky-cell").css('right', $(this).scrollLeft());
                    $(this).find("table th.sticky-cell-opposite").css('left', maxScroll - $(this).scrollLeft());
                    $(this).find("table td.sticky-cell-opposite").css('left', maxScroll - $(this).scrollLeft());
            }
        }).scroll();
    }

    $( window ).resize(function() {
        $(".sticky-table").scroll();
    });

});
$( document ).ready(function(){
    $( document ).trigger( "stickyTable" );
});