JSFiddle - React, Tailwind, and code Playground

by Andrew Pougher

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div ng-app="myApp" ng-controller='MainController' class="container">
<div class="row">


  <span class='masthead' scroll-position="scroll">{{scroll}}</span>
  <nav class="nav text-center vcenter label label-info" ng-class="{small: scroll > 50, big: scroll <= 50}"><i class="fa fa-home"></i></nav>
</div></div>

CSS

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');
  body {
background: url("http://placehold.it/1400x400/transparent/ffffff/&text=///"), linear-gradient(90deg, #fca15e, #ad51a3);
    background-attachment: fixed;
    padding: 2rem;

 height:calc(100vh + 150vh);
}

.masthead {
  position: fixed;
  bottom: 10px;
  right: 10px;
}
nav:before {content:""}
nav {
  position: fixed;
  top: 0px;
  border: 1px solid black;
  background: rgba(255,255,255,0.5);
  width:100vh;

}

.vcenter {
    display: inline-block;
    vertical-align: bottom;
    float: none;
}

.small {
  opacity: 0.2;
  font-size:8px;
	transition: all .2s ease-in;
	-o-transition: all .2s ease-in;
	-moz-transition: all .2s ease-in;
	-webkit-transition: all .2s ease-in;
    width:100px;
       height:100px;
}

.big {
  height: 100px;
  	transition: all .2s ease-in;
	-o-transition: all .2s ease-in;
	-moz-transition: all .2s ease-in;
	-webkit-transition: all .2s ease-in;
}

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;
});