在鼠标悬停时更改类,并根据偏移量滚动

时间:2018-02-19 22:29:14

标签: angularjs angularjs-directive

我有以下指令,它在滚动时调整导航栏的大小。

这很好用,但当我将鼠标悬停在导航栏上时,我想删除/添加一个类,具体取决于偏移量。但是,下面的代码似乎没有发生这种情况。我该如何解决?

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>

我的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;
}

1 个答案:

答案 0 :(得分:1)

在您的指令link功能中,您需要在mouseenter上设置mouseleaveelement事件侦听器,而不是angular.element

因此请将angular.element.on('mouseenter', ...)angular.element.on('mouseleave', ...)替换为element.on('mouseenter', ...)element.on('mouseleave', ...)