title: Change class on mouseover and scroll dependent on offset
body: <p>I have the following directive, which resizes the navbar on scroll. </p>
  
  <p>This works fine, but when I hover the mouse over the navbar, I want to to remove/add a class depending on the offset. However, this doesn't seem to be happening with the code below. How do I fix it?</p>
  
  <pre><code>angular.module('marquesslondonApp')
    .directive('navbarShrink', function ($window) {
      return {
        restrict: 'A',
        scope: {
          offset: '@',
          scrollClass: '@'
        },
        link: function (scope, element) {
          angular.element($window).bind('scroll', function () {
            if (this.pageYOffset &gt;= parseInt(scope.offset)) {
              element.addClass(scope.scrollClass);
            } else {
              element.removeClass(scope.scrollClass);
            }
          });
          angular.element.on('mouseenter', function () {
            if (this.pageYOffset &gt;= parseInt(scope.offset)) {
              element.removeClass(scope.scrollClass);
            }
          });
          angular.element.on('mouseleave', function () {
            if (this.pageYOffset &gt;= parseInt(scope.offset)) {
              element.addClass(scope.scrollClass);
            }
          });
        }
      };
    });
  </code></pre>
  
  <p>This is the element I am targeting:</p>
  
  <pre><code>&lt;div navbar-shrink offset="50" scroll-class="navbar-shrink" class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;
    &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
  
        &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse"&gt;
                &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
  
        &lt;a class="navbar-brand" href="/"&gt;
                &lt;img src="images/logo.png"&gt;
              &lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div style="display: block"&gt;
        &lt;div class="collapse navbar-collapse" id="js-navbar-collapse"&gt;
          &lt;ul class="nav navbar-nav" id="navbar"&gt;
            &lt;li&gt;&lt;a href="/"&gt;HOME&lt;/a&gt;&lt;/li&gt;
            &lt;li class="dropdown"&gt;
              &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;TAILORING&lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;a href="/process"&gt;Process&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="/look"&gt;Our Look&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a ng-href="/lifestyle"&gt;LIFESTYLE&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a ng-href="/story"&gt;STORY&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a ng-href="/contact"&gt;GET IN TOUCH&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>.navbar .navbar-nav {
    display: inline-block;
    float: none;
    margin-top: 6.5em;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 5px;
    text-transform: uppercase;
    font-size: 14px;
  }
  .navbar-shrink .navbar-nav {
    display: none;
  }
  .navbar-shrink.navbar {
    height: 6em;
  }
  .navbar-shrink.navbar&gt;.container&gt;.navbar-header&gt;.navbar-brand img {
    width: 250px;
    height: 44px;
  }
  .navbar-default .navbar-nav&gt;li&gt;a {
    color: #fff;
    font-weight: 300;
  }
  .navbar-default .navbar-nav&gt;li&gt;a:focus, .navbar-default .navbar-nav&gt;li&gt;.active, {
    color: #808ba0;
  }
  .navbar-default .navbar-nav&gt;li&gt;a:hover {
    color: #808ba0;
    font-weight: 300;
  }
  #navbar-header {
    transition: 2s ease-in-out;
  }
  .navbar-default {
    background-color: rgba(51, 55, 65, 0.9);
  }
  .navbar-default.navbar-shrink {
    background-color: rgba(51, 55, 65, 0.9);
  }
  .navbar {
    position: relative;
    border-radius: 0px;
    border: 0px;
    height: 10.5em;
    -webkit-transition: height 300ms ease-in-out;
    -moz-transition: height 300ms ease-in-out;
    -o-transition: height 300ms ease-in-out;
    transition: height 300ms ease-in-out;
  }
  .navbar-fixed-top {
    position: fixed !important;
  }
  .navbar-brand {
    position: absolute;
    display: block;
  }
  .navbar-brand img {
    width: 250px;
    height: 44px;
  }
  .nav {
    text-align: center;
  }
  .navbar .navbar-collapse {
    text-align: center;
  }
  </code></pre>