From 8f277b38198a8a86e54ed48a51c55da2ca9aa7d1 Mon Sep 17 00:00:00 2001 From: Nick Vellios Date: Fri, 3 Nov 2017 18:20:30 -0700 Subject: [PATCH] Added an option to set a vertical offset for page with fixed nabbers, fixed a horizontal scrolling bug On some pages that have horizontal scrollbars the alignment is off for fixed columns. Also, pages with a fixed navbar cause the fixed headers to be hidden. I added an option for a vertical offset (vOffset) to address this. --- jquery.stickysort.js | 20 +++++++++++--------- jquery.stickysort.min.js | 2 +- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/jquery.stickysort.js b/jquery.stickysort.js index 68296a6..4e6c8e3 100644 --- a/jquery.stickysort.js +++ b/jquery.stickysort.js @@ -11,7 +11,8 @@ }, sortable: false, scrollThrottle: 15, - resizeThrottle: 250 + resizeThrottle: 250, + vOffset: 0 }, opts); this.each(function() { @@ -56,7 +57,7 @@ .find('tbody td').remove(); $stickyInsct.find('table').html(''+$t.find('thead th:first-child').html()+''); - + // Set widths var setWidths = function () { $t @@ -85,7 +86,7 @@ repositionSticky = function () { // Return value of calculated allowance var allowance = calcAllowance(); - + // 1. Deal with positioning of sticky header // Check if wrapper parent is overflowing along the y-axis if($t.height() > $stickyWrap.height()) { @@ -118,13 +119,14 @@ } else { // If it is not overflowing (basic layout) // Position sticky header based on viewport scrollTop - if($w.scrollTop() > $t.offset().top && $w.scrollTop() < $t.offset().top + $t.outerHeight() - allowance) { + if($w.scrollTop() > $t.offset().top - settings.vOffset && $w.scrollTop() < $t.offset().top + $t.outerHeight() - allowance) { // When top of viewport is in the table itself $stickyHead.add($stickyInsct).css({ opacity: 1, 'pointer-events': 'auto', position: 'fixed', - left: $stickyWrap.offset().left + left: $stickyWrap.offset().left - $(window).scrollLeft(), + top: settings.vOffset }); $stickyHead.find('table').css({ left: -$stickyWrap.scrollLeft() @@ -145,7 +147,7 @@ // When left of wrapping parent is out of view $stickyCol.css({ position: 'fixed', - left: $stickyWrap.offset().left, + left: $stickyWrap.offset().left - $(window).scrollLeft(), top: $stickyWrap.offset().top - $w.scrollTop(), height: $stickyWrap.height() }) @@ -177,10 +179,10 @@ rowHeight += $(this).height(); }); allowance.push(rowHeight); - + // Get height based on viewport allowance.push($w.height()*settings.threshold.viewport) - + // If pixel threshold exists, add it if(settings.threshold.px) { allowance.push(settings.threshold.px); @@ -325,4 +327,4 @@ // Return to allow chaining return this; }; -})(jQuery); \ No newline at end of file +})(jQuery); diff --git a/jquery.stickysort.min.js b/jquery.stickysort.min.js index 904a781..60c025d 100644 --- a/jquery.stickysort.min.js +++ b/jquery.stickysort.min.js @@ -1 +1 @@ -(function(a){a.fn.stickySort=function(c){var b=a.extend(true,{threshold:{rows:3,viewport:0.25,px:false,allowanceEval:"min"},sortable:false,scrollThrottle:15,resizeThrottle:250},c);this.each(function(){if(a(this).is("table")&&a(this).find("thead").length>0&&a(this).find("th").length>0){var f=a(window),i=a(this),j=i.find("thead").clone(),m=i.find("thead, tbody").clone();i.wrap('
').parent().addClass(i.attr("class")).end().addClass("sticky-enabled");if(i.hasClass("overflow-y")){i.removeClass("overflow-y").parent().addClass("overflow-y")}i.after('
');if(i.find("tbody th").length>0){i.after('
')}var g=a(this).siblings(".sticky-thead"),h=a(this).siblings(".sticky-col"),n=a(this).siblings(".sticky-intersect"),k=a(this).parent(".sticky-wrap");g.find("table").append(j);h.find("table").append(m).find("thead th:gt(0)").remove().end().find("tbody td").remove();n.html("");var e=function(){i.find("thead th").each(function(o){g.find("th").eq(o).width(a(this).width())}).end().find("tr").each(function(o){h.find("tr").eq(o).height(a(this).height())});g.width(k.width()).find("table").width(i.width());h.find("th").add(n.find("th")).width(i.find("thead th").width());h.find("table").css({left:k.offset().left})},d=function(){var o=l();if(i.height()>k.height()){if(k.scrollTop()>0){g.add(n).css({opacity:1,"pointer-events":"auto",position:"fixed",top:k.offset().top-f.scrollTop(),left:k.offset().left}).find("table").css({left:-k.scrollLeft()})}else{g.add(n).css({opacity:0,"pointer-events":"none"})}}else{if(f.scrollTop()>i.offset().top&&f.scrollTop()0){h.css({position:"fixed",left:k.offset().left,top:k.offset().top-f.scrollTop(),height:k.height()}).find("table").css({top:-k.scrollTop(),left:0}).end().add(n).css({opacity:1,"pointer-events":"auto"})}else{h.css({opacity:0,"pointer-events":"none"})}},l=function(){var p=0,o=[];i.find("tbody tr:lt("+b.threshold.rows+")").each(function(){p+=a(this).height()});o.push(p);o.push(f.height()*b.threshold.viewport);if(b.threshold.px){o.push(b.threshold.px)}if(b.threshold.allowanceEval=="min"){return Math.min.apply(null,o)}else{return Math.max.apply(null,o)}};e();i.parent(".sticky-wrap").scroll(a.throttle(b.scrollThrottle,d));f.load(e).resize(a.debounce(b.resizeThrottle,function(){e();d()})).scroll(a.throttle(b.scrollThrottle,d));if(b.sortable||(i.data("sortable")!=undefined||i.hasClass("sortable"))){i.find("tbody tr").each(function(o){a(this).attr("data-sortOrder",o)});k.addClass("sortable").find("thead th").addClass("sort-default").data("sortState",1).append('').find(".sort-handle").click(function(o){o.preventDefault()});k.on("click",".sticky-enabled thead th, .sticky-thead thead th, .sticky-col thead th, .sticky-intersect thead th",function(){var q=a(this),p=q.index(),r=k.find("thead th").eq(p),o=a.makeArray(i.find("tbody tr"));if(q.data("sortState")%3==0){o.sort(function(u,t){return parseInt(a(u).attr("data-sortOrder"))-parseInt(a(t).attr("data-sortOrder"))});q.add(r).removeClass().addClass("sort-default")}else{o.sort(function(u,t){var v=A(a(u).children().eq(p).text()),y=A(a(t).children().eq(p).text());function A(F){var I=[],C=0,H=-1,G=0,E,D;while(E=(D=F.charAt(C++)).charCodeAt(0)){var B=(E==46||(E>=48&&E<=57));if(B!==G){I[++H]="";G=B}I[H]+=D}return I}for(x=0;v[x]&&y[x];x++){if(v[x]!==y[x]){var z=Number(v[x]),w=Number(y[x]);if(z==v[x]&&w==y[x]){return z-w}else{return(v[x]>y[x])?1:-1}}}return v.length-y.length});if(q.data("sortState")%3==2){o=o.reverse();q.add(r).removeClass().addClass("sort-desc")}else{q.add(r).removeClass().addClass("sort-asc")}}var s=q.data("sortState")+1;q.add(r).data("sortState",s%3);k.find("table").each(function(t){a(this).find("thead th").not(":eq("+p+")").data("sortState",1).removeClass().addClass("sort-default")});i.find("tbody").html(o);i.find("tbody tr").each(function(t){h.find("tbody tr").eq(t).find("th").html(a(this).find("th").first().html())})})}}});return this}})(jQuery); \ No newline at end of file +!function(t){t.fn.stickySort=function(e){var s=t.extend(!0,{threshold:{rows:3,viewport:.25,px:!1,allowanceEval:"min"},sortable:!1,scrollThrottle:15,resizeThrottle:250,vOffset:0},e);return this.each(function(){if(t(this).is("table")&&t(this).find("thead").length>0&&t(this).find("th").length>0){var e=t(window),a=t(this),i=a.find("thead").clone(),o=a.find("thead, tbody").clone();a.wrap('
').parent().addClass(a.attr("class")).end().addClass("sticky-enabled"),a.hasClass("overflow-y")&&a.removeClass("overflow-y").parent().addClass("overflow-y"),a.after('
"+i.find("thead th:first-child").html()+"
'),a.find("tbody th").length>0&&a.after('
');var d=t(this).siblings(".sticky-thead"),r=t(this).siblings(".sticky-col"),n=t(this).siblings(".sticky-intersect"),l=t(this).parent(".sticky-wrap");d.find("table").append(i),r.find("table").append(o).find("thead th:gt(0)").remove().end().find("tbody td").remove(),n.find("table").html("");var h=function(){a.find("thead th").each(function(e){d.find("th").eq(e).width(t(this).width())}).end().find("tr").each(function(e){r.find("tr").eq(e).height(t(this).height())}),d.width(l.width()).find("table").width(a.width()),r.find("th").add(n.find("th")).width(a.find("thead th").first().width()),r.find("table").css({left:l.offset().left})},f=function(){var i=c();a.height()>l.height()?l.scrollTop()>0?(d.add(n).css({opacity:1,"pointer-events":"auto",position:"fixed",top:l.offset().top-e.scrollTop(),left:l.offset().left}),d.find("table").css({left:-l.scrollLeft()})):(d.add(n).css({opacity:0,"pointer-events":"none"}),n.css({position:"absolute",top:0,left:0})):e.scrollTop()>a.offset().top-s.vOffset&&e.scrollTop()0?r.css({position:"fixed",left:l.offset().left-t(window).scrollLeft(),top:l.offset().top-e.scrollTop(),height:l.height()}).find("table").css({top:-l.scrollTop(),left:0}).end().add(n).css({opacity:1,"pointer-events":"auto"}):r.css({opacity:0,"pointer-events":"none"})},c=function(){var i=0,o=[];return a.find("tbody tr:lt("+s.threshold.rows+")").each(function(){i+=t(this).height()}),o.push(i),o.push(e.height()*s.threshold.viewport),s.threshold.px&&o.push(s.threshold.px),"min"==s.threshold.allowanceEval?Math.min.apply(null,o):Math.max.apply(null,o)};h(),a.parent(".sticky-wrap").scroll(t.throttle(s.scrollThrottle,f)),e.load(h).resize(t.debounce(s.resizeThrottle,function(){h(),f()})).scroll(t.throttle(s.scrollThrottle,f)),(s.sortable||void 0!=a.data("sortable")||a.hasClass("sortable"))&&(a.find("tbody tr").each(function(e){t(this).attr("data-sortOrder",e)}),l.addClass("sortable").find("thead th").addClass("sort-default").data("sortState",1).wrapInner("
").find("div").css({position:"relative"}).append('').find(".sort-handle").click(function(t){t.preventDefault()}),l.on("click",".sticky-enabled thead th, .sticky-thead thead th, .sticky-col thead th, .sticky-intersect thead th",function(){var e=t(this),s=e.index(),i=l.find("thead th").eq(s),o=t.makeArray(a.find("tbody tr"));e.data("sortState")%3==0?(o.sort(function(e,s){return parseInt(t(e).attr("data-sortOrder"))-parseInt(t(s).attr("data-sortOrder"))}),e.add(i).removeClass().addClass("sort-default")):(o.sort(function(e,a){function i(t){for(var e,s,a=[],i=0,o=-1,d=0;e=(s=t.charAt(i++)).charCodeAt(0);){var r=46==e||e>=48&&57>=e;r!==d&&(a[++o]="",d=r),a[o]+=s}return a}var o=i(t(e).children().eq(s).text()),d=i(t(a).children().eq(s).text());for(x=0;o[x]&&d[x];x++)if(o[x]!==d[x]){var r=Number(o[x]),n=Number(d[x]);return r==o[x]&&n==d[x]?r-n:o[x]>d[x]?1:-1}return o.length-d.length}),e.data("sortState")%3==2?(o=o.reverse(),e.add(i).removeClass().addClass("sort-desc")):e.add(i).removeClass().addClass("sort-asc"));var d=e.data("sortState")+1;e.add(i).data("sortState",d%3),l.find("table").each(function(e){t(this).find("thead th").not(":eq("+s+")").data("sortState",1).removeClass().addClass("sort-default")}),a.find("tbody").html(o),a.find("tbody tr").each(function(e){r.find("tbody tr").eq(e).find("th").html(t(this).find("th").first().html())})}))}}),this}}(jQuery);
"+a.find("thead th:first-child").html()+"