我有以下指令,它在滚动时调整导航栏的大小。
这很好用,但当我将鼠标悬停在导航栏上时,我想删除/添加一个类,具体取决于偏移量。但是,下面的代码似乎没有发生这种情况。我该如何解决?
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;
}
答案 0 :(得分:1)
在您的指令link
功能中,您需要在mouseenter
上设置mouseleave
和element
事件侦听器,而不是angular.element
。
因此请将angular.element.on('mouseenter', ...)
和angular.element.on('mouseleave', ...)
替换为element.on('mouseenter', ...)
和element.on('mouseleave', ...)
。