Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="https://code.angularjs.org/1.6.0/angular.js"></script>
<nav scroll class = "navbar navbar-default navbar-custom navbar-fixed-top"
ng-class="{'navbar navbar-default navbar-custom navbar-fixed-top is-fixed is-visible':boolChangeClass}">
    <div class="container-fluid">
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" >
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="post.html">Save</a>
                </li>
                <li>
                    <a href="contact.html">Export</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

CSS

body{
  height: 800px;
}

nav{
  
  background: red;
}

.is-fixed{
  position:fixed;
  background:blue;
}

JavaScript

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

myApp.directive("scroll", function ($window) {
    return function(scope, element, attrs) {
        console.log('directive');
        angular.element($window).bind("scroll", function() {
        			console.log("scroll");
             if (this.pageYOffset >= 0) {
                 scope.boolChangeClass = true;
             } else {
                 scope.boolChangeClass = false;
             }
            scope.$apply();
        });
    };
});