Reproduction of angular, waypoints and smooth-scroll playing together.

angular.module('scrollApp.directives', []).
  directive('smoothly', function() {
    return function(scope, elm, attr) {
        elm.smoothScroll({offset: -35});
    };
  }).
  directive('stickyTop', function() {
    return function(scope, elm, attr) {
      // This simply toggles the sticky class when a wrapper for the
      // target element is scrolled past a specified offset.
      elm.waypoint(function(event, direction) {
        elm.toggleClass('sticky', direction === "down");
      }, { offset: 0 });
    };
  }).
  directive('stickyMenuTop', function() {
    return function(scope, elm, attr) {
      // This simply toggles the sticky class when a wrapper for the
      // target element is scrolled past a specified offset.
      elm.waypoint(function(event, direction) {
        elm.toggleClass('stickyMenu', direction === "down");
      }, { offset: 35 });
    };
  });

angular.module('scrollApp', ['scrollApp.directives']).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider.when('/this', {template: 'this.html'});
    $routeProvider.when('/that', {template: 'that.html'});
    $routeProvider.when('/other', {template: 'other.html'});
    $routeProvider.otherwise({redirectTo: '/this'});

    $locationProvider.html5Mode(true);
  }]);
  
function NavCtrl($scope, $route, $routeParams, $location) {
    $scope.$route = $route;
    $scope.$location = $location;
    $scope.$routeParams = $routeParams;
    $scope.active = function(path) {
      if ($location.path().slice(0, path.length) == path) {
        return "active";
      }
      return "inactive";
    };
}

<!DOCTYPE html>
<html ng-app="scrollApp">

  <head lang="en">
    <meta charset="utf-8">
    <title>Scrolling Example</title>
    <link rel='stylesheet' href='http://sarah.lebeckjobe.com/css/reset.css' type='text/css' />
    <link rel='stylesheet' href='layout.css' type='text/css' />
  </head>
  
  <body ng-controller="NavCtrl">
    <div class="wrapper">
  <div class="header">
      Great Big Header
  </div>
  <div class="nav-holder">
    <div class="nav" sticky-top>
      <ul>
        <li class='{{active("/this")}}'><a href='/this'>This</a></li>
        <li class='{{active("/that")}}'><a href='/that'>That</a></li>
        <li class='{{active("/other")}}'><a href='/other'>Other</a></li>
       </ul>
    </div>
  </div>
  <div ng-view></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://sarah.lebeckjobe.com/lib/waypoints/waypoints.min.js"></script>
<script src="http://sarah.lebeckjobe.com/lib/smooth-scroll/jquery.smooth-scroll.min.js"></script>
<script src="http://sarah.lebeckjobe.com/lib/angular/angular.min.js"></script>
<script src="scrollApp.js"></script>
</body>
  
</html>

.wrapper {
    width: 400px;
    margin: 0 auto;
}

.nav,
.header {
    width: 400px;
}

h3 {
  font-weight: bold;
}

.main,
.menu,
.menu-holder {
    display: inline;
    float: left;
    margin-right: 5px;
    margin-left: 5px;
}

.menu-holder {
    height: 20px;
    width: 40px;
}

.menu {
    width: 40px;
}

.main {
    width: 330px;
}

.header {
    height: 200px;
    background-color: green;
}

.nav-holder {
    height: 35px;
}

.nav {
    background-color: yellow;
    height: 35px;
}

.sticky {
    position: fixed;
    top: 0;
}

.stickyMenu {
    position: fixed;
    top: 35px;
}

.nav ul {
    display: inline;
    list-style: none;
}

.nav ul li {
    display: inline;
    float: left;
    padding: 10px 15px 5px 10px;
}

<div class="menu-holder">
    <div class="menu" sticky-menu-top>
      <ul>
        <li><a href="#p1" smoothly>p1</a></li>
        <li><a href="#p2" smoothly>p2</a></li>
        <li><a href="#p3" smoothly>p3</a></li>
        <li><a href="#p4" smoothly>p4</a></li>
        <li><a href="#p5" smoothly>p5</a></li>
      </ul>
    </div>
  </div>
  <div class="main">
      <h1>Other Page</h1>
      <h3 id="p1">Paragraph 1</h3>
      <p>
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
      </p>
      <h3 id="p2">Paragraph 2</h3>
      <p>
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
      </p>
      <h3 id="p3">Paragraph 3</h3>
      <p>
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
      </p>
      <h3 id="p4">Paragraph 4</h3>
      <p>
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
      </p>
      <h3 id="p5">Paragraph 5</h3>
      <p>
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
      </p>
  </div>

<div class="menu-holder">
    <div class="menu" sticky-menu-top>
      <ul>
        <li><a href="#p1" smoothly>p1</a></li>
        <li><a href="#p2" smoothly>p2</a></li>
        <li><a href="#p3" smoothly>p3</a></li>
        <li><a href="#p4" smoothly>p4</a></li>
        <li><a href="#p5" smoothly>p5</a></li>
      </ul>
    </div>
  </div>
  <div class="main">
      <h1>That Page</h1>
      <h3 id="p1">Paragraph 1</h3>
      <p>
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
      </p>
      <h3 id="p2">Paragraph 2</h3>
      <p>
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
      </p>
      <h3 id="p3">Paragraph 3</h3>
      <p>
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
      </p>
      <h3 id="p4">Paragraph 4</h3>
      <p>
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
      </p>
      <h3 id="p5">Paragraph 5</h3>
      <p>
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
      </p>
  </div>

<div class="menu-holder">
    <div class="menu" sticky-menu-top>
      <ul>
        <li><a href="#p1" smoothly>p1</a></li>
        <li><a href="#p2" smoothly>p2</a></li>
        <li><a href="#p3" smoothly>p3</a></li>
        <li><a href="#p4" smoothly>p4</a></li>
        <li><a href="#p5" smoothly>p5</a></li>
      </ul>
    </div>
  </div>
  <div class="main">
      <h1>This Page</h1>
      <h3 id="p1">Paragraph 1</h3>
      <p>
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
      </p>
      <h3 id="p2">Paragraph 2</h3>
      <p>
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
      </p>
      <h3 id="p3">Paragraph 3</h3>
      <p>
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
      </p>
      <h3 id="p4">Paragraph 4</h3>
      <p>
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
      </p>
      <h3 id="p5">Paragraph 5</h3>
      <p>
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah
      </p>
  </div>