Esse é o meu código e não funciona. O que há de errado com isso?
HTML
<i ng-show="whenIconsIntoView()" class="fa fa-mail"></i>
JS
app.controller("AboutCtrl", ["$scope", "$window", function($scope, $window){
// some function to detect is scroll into user"s view
isScrolledIntoView = function(elem) {...}
$window.onscroll = function() {
$scope.whenIconsIntoView = function(){
$scope.$apply(function() {
return isScrolledIntoView(".icons");
});
};
};
}]);
Respostas:
0 para resposta № 1Experimente por um código de maneira mais angular
app.controller("AboutCtrl", ["$scope", function($scope, $window) {
// some function to detect is scroll into user"s view
isScrolledIntoView = function(elem) {...
}
$window[0].on("scroll", function() {
$scope.whenIconsIntoView = function() {
$scope.$apply(function() { //need to run digest cycle from events
return (isScrolledIntoView(".icons")) ? true : false;
});
};
});
}]);
E eu gostaria de sugerir que você não jogue com o DOM do controlador angular, acho que a diretiva seria a melhor maneira de isso isScrolledIntoView = function(elem) {...}
função está fazendo.
-1 para resposta № 2
Você pode adicionar um ouvinte de evento no seu arquivo JS paraouça a posição desse ID. Em outras palavras, você provavelmente precisará criar uma diretiva anexada à coisa que deseja exibir, e nessa diretiva você deseja ter a posição sempre enviando. Portanto, use jquery em uma nova diretiva e faça ping é posição, então se a posição disso é um valor que está no bingo do monitor.
Em outras palavras, se o seu monitor tiver 1000 px de altura,e seu elemento estiver 1400px abaixo, você rolar 400px para baixo, o jquery reconhecerá que a altura de rolagem da janela foi alterada e poderá disparar uma função.
Não quero fornecer o código, mas um entendimento de alto nível. Isso ajuda?
$("#scrollid").scroll(function(){
// get current window height
//then get id position on page
// if window scroll overlaps with id position, set display:bock or whatever
})