Improve performance by using translateY instead of top. Properly get …

…sidebar width.
WeCodePixels · Aug 29, 2016 · 353fc39 · 353fc39
1 parent a9d9140
commit 353fc39
Showing 1 changed file with 26 additions and 7 deletions.
diff --git a/js/theia-sticky-sidebar.js b/js/theia-sticky-sidebar.js
@@ -32,7 +32,7 @@
             var success = tryInit(options, $that);
 
             if (!success) {
-                console.log('TST: Body width smaller than options.minWidth. Init is delayed.');
+                console.log('TSS: Body width smaller than options.minWidth. Init is delayed.');
 
                 $(document).scroll(function (options, $that) {
                     return function (evt) {
@@ -258,20 +258,22 @@
                     if (position == 'fixed') {
                         o.stickySidebar.css({
                             'position': 'fixed',
-                            'width': o.sidebar.width(),
-                            'top': top,
-                            'left': o.sidebar.offset().left + parseInt(o.sidebar.css('padding-left'))
+                            'width': getWidthForObject(o.stickySidebar) + 'px',
+                            'transform': 'translateY(' + top + 'px)',
+                            'left': (o.sidebar.offset().left + parseInt(o.sidebar.css('padding-left'))) + 'px',
+                            'top': '0px'
                         });
                     }
                     else if (position == 'absolute') {
                         var css = {};
 
                         if (o.stickySidebar.css('position') != 'absolute') {
                             css.position = 'absolute';
-                            css.top = scrollTop + top - o.sidebar.offset().top - o.stickySidebarPaddingTop - o.stickySidebarPaddingBottom;
+                            css.transform = 'translateY(' + (scrollTop + top - o.sidebar.offset().top - o.stickySidebarPaddingTop - o.stickySidebarPaddingBottom) + 'px)';
+                            css.top = '0px';
                         }
 
-                        css.width = o.sidebar.width();
+                        css.width = getWidthForObject(o.stickySidebar) + 'px';
                         css.left = '';
 
                         o.stickySidebar.css(css);
@@ -315,7 +317,8 @@
                     });
                     o.stickySidebar.css({
                         'position': 'static',
-                        'width': ''
+                        'width': '',
+                        'transform': 'none'
                     });
                 }
 
@@ -331,5 +334,21 @@
                 }
             });
         }
+
+        function getWidthForObject(object) {
+            var width;
+
+            try {
+                width = object[0].getBoundingClientRect().width;
+            }
+            catch(err) {
+            }
+
+            if (typeof width === "undefined") {
+                width = object.width();
+            }
+
+            return width;
+        }
     }
 })(jQuery);