The fire events are taken place on the same template, but should be fired at a different certain point of page Y offset. Now both are firing at the same time, so my question is how can that be fixed.
var accessoires = angular.module("accessoires", ["ngAnimate"]);
accessoires.controller("Headphone", function($scope){
});
accessoires.directive("scroll", function ($window) {
return function(scope, element, attrs) {
angular.element($window).bind("scroll", function() {
if (this.pageYOffset > 10) {
scope.boolChangeClass = true;
} else {
scope.boolChangeClass = true;
}
scope.$apply();
});
};
});
accessoires.directive("scroll", function ($window) {
return function(scope, element, attrs) {
angular.element($window).bind("scroll", function() {
if (this.pageYOffset > 800) {
second.imageAnimateDown = true;
} else {
scope.imageAnimateDown = true;
}
scope.$apply();
});
};
});
<html lang="en" ng-app="myApp">
<body>
<script type="text/ng-template" id="pages/accessories.html">
<div ng-controller="Headphone" scroll class="accessoires" >
<div class="container-fluid">
<div ng-style="{'background-image': 'url(http://res.cloudinary.com/djlrz2rnd/image/upload/q_100/v1479044967/hd50_dash_8ffda17_yuqtme.jpg)'}" class="headphone_image" ng-class="{min:boolChangeClass}">
<span id="HD_headphone">HD 50</span>
</div>
<div ng-style="{'background-image': 'url(http://www3.res.meizu.com/static/en/accessory/hd50/summary/images/cross_white_d2d07af.png)'}" class="headphone_image" ng-class="{min:imageAnimateDown}">
<span id="white-headphone-vertical">White version</span>
</div>
</div>
</div>
</script>
</body>
</html>
.headphone_image {
background-size: contain;
background-repeat: no-repeat;
background-position: center top;
height: 0;
width: 100%;
bottom: 0;
position: relative;
padding-top: 56.25%;
}
#HD_headphone {
color: #3db1fa;
border: 1px solid #3db1fa;
top: 200px;
left: 0;
font-size: 20px;
text-align: center;
width: 200px;
position: absolute;
}
.min #HD_headphone {
-webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
-moz-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
-ms-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
-o-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
margin-left: 200px;
}
#white-headphone-vertical {
top: 200px;
position: absolute;
}
.min #white-headphone-vertical {
-webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3s;
-moz-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3s;
-ms-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3s;
-o-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3s;
transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3s;
margin-top: 200px;
}