Change class on mouseover and scroll dependent on offset - angularjs

Question

I have the following directive, which resizes the navbar on scroll.
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?
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 >= parseInt(scope.offset)) {
element.addClass(scope.scrollClass);
} else {
element.removeClass(scope.scrollClass);
}
});
angular.element.on('mouseenter', function () {
if (this.pageYOffset >= parseInt(scope.offset)) {
element.removeClass(scope.scrollClass);
}
});
angular.element.on('mouseleave', function () {
if (this.pageYOffset >= parseInt(scope.offset)) {
element.addClass(scope.scrollClass);
}
});
}
};
});
This is the element I am targeting:
<div navbar-shrink offset="50" scroll-class="navbar-shrink" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">
<img src="images/logo.png">
</a>
</div>
<div style="display: block">
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav" id="navbar">
<li>HOME</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">TAILORING</a>
<ul class="dropdown-menu">
<li>Process</li>
<li>Our Look</li>
</ul>
</li>
<li><a ng-href="/lifestyle">LIFESTYLE</a></li>
<li><a ng-href="/story">STORY</a></li>
<li><a ng-href="/contact">GET IN TOUCH</a></li>
</ul>
</div>
</div>
</div>
</div>
My CSS:
.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>.container>.navbar-header>.navbar-brand img {
width: 250px;
height: 44px;
}
.navbar-default .navbar-nav>li>a {
color: #fff;
font-weight: 300;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>.active, {
color: #808ba0;
}
.navbar-default .navbar-nav>li>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;
}

Answer 1

In your directive link function, you need to set the mouseenter and mouseleave event listeners on element, not angular.element.
So replace angular.element.on('mouseenter', ...) and angular.element.on('mouseleave', ...) with element.on('mouseenter', ...) and element.on('mouseleave', ...).