I met a problem, a div is controlled by a value set in controller, if the value is true, then display it, it the value is false, then hide it. The value is controlled by the scroll event. The html code is as below:
<body ng-app="app" ng-controller="controller">
<div class="round" ng-style="{'display':isRoundShow?'inline':'none'}"></div>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
</body>
The controller part is as below:
angular.module('app', [])
.controller('controller', function($scope) {
$scope.isRoundShow = false;
window.onscroll = function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop > 50) {
$scope.isRoundShow = true;
}else{
$scope.isRoundShow = false;
}
}
})
The CSS definition is:
.round {
width : 40px;
height: 40px;
background-color: #FF0000;
border-radius: 50%;
position: fixed;
left: 10px;
top: 10px;
}
Now I wonder why when I scroll, the round div never shows, I have built a plunker here : https://plnkr.co/edit/u8RHyCMYRR5L8BwouOkg?p=preview
