Angularjs 更改鼠标悬停时的类别并根据偏移量滚动

我有下面的指令，它调整滚动条上导航栏的大小

这很好，但是当我将鼠标悬停在导航栏上时，我想根据偏移量删除/添加一个类。但是，下面的代码似乎没有出现这种情况。我怎么修理它

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

这是我的目标：

<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><a href="/">HOME</a></li>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">TAILORING</a>
            <ul class="dropdown-menu">
              <li><a href="/process">Process</a></li>
              <li><a href="/look">Our Look</a></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>

在指令链接函数中，需要在元素而不是angular.element上设置mouseenter和mouseleave事件侦听器

---

所以替换angular.element.on'mouseenter'。。。还有棱角的元素在“mouseleave”上。。。在'mouseenter'上使用元素。。。和元素。在“mouseleave”上，…

你到底看到了什么行为？该类是否未添加或删除？当您在元素上移动鼠标时会发生什么？在scroll上，该类被添加/删除。在mouseenter和mouseleave上，您仅尝试删除mouseenter上的类，并在离开时添加它。如果你立即进入然后离开，就不会有任何变化。当您将鼠标移到元素上时，该类是否已位于该元素上？如果将鼠标放在元素上，则不会删除该元素？如果用户已向下滚动页面，则navbar收缩类将位于该元素上，输入该元素应将其删除，离开该元素应将其恢复

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