JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller='MainController'>
  <span class='scroll-debug' scroll-position="scroll">{{scroll}}</span>
  <h1 ng-class="{small: scroll > 50, big: scroll <= 50}">Test</h1>
</div>

CSS

body {
  height: 10000px;
}

.scroll-debug {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

h1 {
  position: relative;
  top: 100px;
  border: 1px solid black;
}

.small {
  height: 1px;
  overflow: hidden;
}

.big {
  height: 100px;
}

JavaScript

var app = angular.module('myApp', []);

app.directive('scrollPosition', function($window) {
  return {
    scope: {
      scroll: '=scrollPosition'
    },
    link: function(scope, element, attrs) {
      var windowEl = angular.element($window);
      var handler = function() {
        scope.scroll = windowEl.scrollTop();
      }
      windowEl.on('scroll', scope.$apply.bind(scope, handler));
      handler();
    }
  };
});

app.controller('MainController', function($scope) {
  $scope.scroll = 0;
});