sticky fixed thanks to @Vikas!

Author: Victor George

app/directives/tc-sticky/tc-sticky.directive.jade

@@ -0,0 +1,50 @@
+
+(function() {
+  'use strict';
+
+  angular.module('tcUIComponents').directive('tcSticky', ['CONSTANTS', '$window', tcSticky]);
+
+  function tcSticky(CONSTANTS, $window) {
+    return {
+        restrict: 'A',
+        link: function(scope, element) {
+            scope.width = element.prop('offsetWidth');
+            var elWidth = scope.width + 'px',
+                elChild = angular.element(element[0].querySelector(':first-child'));
+                elChild.css('width', elWidth);
+            angular.element($window).bind("scroll", function() {
+                var affixElement = document.getElementById('affix'),
+                    xPosition = 0,
+                    yPosition = 0;
+                function getPosition(element) {
+                    while(element) {
+                        yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
+                        element = element.offsetParent;
+                    }
+                }
+                getPosition(affixElement);
+                var height = angular.element(affixElement).prop('offsetHeight');
+                var top = angular.element(affixElement).prop('offsetTop');
+                // console.log(yPosition);
+                // console.log(angular.element(document).scrollTop);
+                // console.log(elChild[0].clientTop);
+                if (yPosition >= 0 || $window.innerHeight <= elChild[0].offsetHeight || $window.innerWidth < 768) {
+                    elChild.removeClass('affix affix-bottom');
+                } else if ( yPosition < 0) {
+                    console.log(top + height);
+                    console.log(yPosition);
+                    console.log(top + height + yPosition);
+                    if (top + height + yPosition < 800) {
+                        elChild.addClass('affix-bottom');
+                        elChild.removeClass('affix');
+                    } else {
+                        elChild.removeClass('affix-bottom');
+                        elChild.addClass('affix');
+                    }
+                    
+                };
+            });
+        }
+    };
+  }
+})();

app/directives/tc-sticky/tc-sticky.directive.js

@@ -60,6 +60,7 @@ html
     link(rel="stylesheet", href="assets/css/directives/toggle-password-with-tips.css")
     link(rel="stylesheet", href="assets/css/directives/toggle-password.css")
     link(rel="stylesheet", href="assets/css/directives/tc-tabs.css")
+    link(rel="stylesheet", href="assets/css/directives/tc-sticky.css")
     link(rel="stylesheet", href="assets/css/directives/tc-section.css")
     link(rel="stylesheet", href="assets/css/directives/tc-paginator.css")
     link(rel="stylesheet", href="assets/css/directives/tc-endless-paginator.css")
@@ -195,6 +196,7 @@ html
     script(src="directives/tc-endless-paginator/tc-endless-paginator.directive.js")
     script(src="directives/tc-paginator/tc-paginator.directive.js")
     script(src="directives/tc-section/tc-section.directive.js")
+    script(src="directives/tc-sticky/tc-sticky.directive.js")
     script(src="directives/tc-tabs/tc-tabs.directive.js")
     script(src="directives/tc-transclude.directive.js")
     script(src="directives/track-toggle/track-toggle.directive.js")

app/index.jade

@@ -1,11 +1,11 @@
 .about-container
 
-  .profile-header-container(ng-cloak)
+  .profile-header-container(ng-cloak,id="affix", tc-sticky)
     //- .sticky-container(sticky media-query="min-width: 780px" use-placeholder="true" offset="10" confine="true" sticky-class="sticked")
       profile-widget(profile="profileVm.profile", edit-profile-link="profileVm.showEditProfileLink", num-wins="profileVm.numWins", profile-vm="profileVm")
 
     //- .sticky-container(bs-affix data-offset-top="10" data-offset-bottom="400")
-    .sticky-container
+    .sticky-container()
       profile-widget(profile="profileVm.profile", edit-profile-link="profileVm.showEditProfileLink", num-wins="profileVm.numWins", profile-vm="profileVm")
 
 

app/profile/about/about.jade

@@ -86,17 +86,19 @@
     flex-direction: column;
     align-items: center;
     margin-top: 40px;
+    width: 100%;
+
 
     .tracks {
       display: flex;
       flex-direction: row;
       justify-content: center;
-      overflow-x: auto;
-      overflow-y: hidden;
+ 
       .track {
         cursor: pointer;
         display: flex;
         width: 100%;
+        flex-wrap: wrap;
         flex-direction: column;
         align-items: center;
         + .track {
@@ -114,8 +116,8 @@
           margin-top: 11px;
           text-transform: uppercase;
           text-align: center;
-          white-space: nowrap;
-          // word-wrap: break-word;
+          // white-space: nowrap;
+          word-wrap: break-word;
         }
       }
     }

assets/css/directives/profile-widget.scss

@@ -0,0 +1,5 @@
+// .affix {
+//     position:fixed !important;
+//     top: 0; //Change this value to match your needs;
+//     z-index: 10;
+// }

assets/css/directives/tc-sticky.scss

@@ -26,15 +26,14 @@
   width: 100%;
   margin-bottom: 5px;
   display: flex;
-
   position: relative;
   margin-left: 10px;
 
 
   @media (min-width: 768px) {
-    max-width: 348px;
+    max-width: 368px;
     margin: 0 auto;
-    padding-left: 10px;
+    padding-right: 10px;
     display: block;
     position: relative;
 
@@ -46,13 +45,29 @@
     margin: 0 auto;
     display: block;
     width: 100%;
+    @media (min-width: 768px){
+      box-sizing: border-box;
+      width: 338px;
+      margin: 0;
+    }
     padding: 30px 34px;
-    top: 0;
-    margin: 0 auto;
+    margin: 0 10px;
+    transition: .2s all;
   }
 
-  .sticky.sticked {
-    
+  .sticky-container.affix {
+    position:fixed;
+    top: 10px;
+    bottom: auto;
+    z-index: 10;
+  }
+
+  .sticky-container.affix-bottom {
+    position: absolute;
+    bottom: 0;
+    z-index: 10;
+    top: auto;
+
   }
 }