I am encountering an issue with my code that involves an if statement checking the value of a variable and binding a mousewheel event based on its true or false value. The problem is, the if condition only triggers on load and not when the value changes to true.
Below is an example of the code inside the controller:
$scope.first = angular.element(document.querySelector('#first'));
$scope.second = angular.element(document.querySelector('#second'));
$scope.firstActive = true;
$scope.secondActive = false;
angular.element($window).bind("scroll", function () {
var scrollTop = angular.element($window).scrollTop();
var firstO = $scope.first.offset().top;
var secondO = $scope.second.offset().top;
var firstDistance = (scrollTop - firstO);
var secondDistance = (scrollTop - secondO);
if (firstDistance < 600) {
$scope.firstActive = true;
$scope.secondActive = false;
}
if (secondDistance >= 0) {
$scope.firstActive = false;
$scope.secondActive = true;
}
});
if ($scope.secondActive) {
html.css('overflowY', 'hidden');
whatIDo.css('display', 'block');
angular.element(whatIDo).bind("mousewheel", function (e) {
if (e.originalEvent.wheelDelta < 0) {
//scroll down
console.log('Down');
$scope.secondSlide = true;
$scope.firstSlide = false;
whatIDo.css('display', 'none');
html.css('overflowY', 'auto');
} else {
//scroll up
console.log('Up');
$scope.secondSlide = false;
$scope.firstSlide = true;
whatIDo.css('display', 'none');
html.css('overflowY', 'auto');
}
$scope.$apply();
});
}
The goal is to trigger the mousewheel on an overlay to switch content between first slide and second slide, and then continue scrolling the page. However, despite setting the variable to true, the if statement is not triggering as expected.