检查用户是否在页面上的特定位置

Question

I have an Angular application that has multiple accordion groups. They are closed by default. One section is quite large so when it opens, the users need to scroll down if they want to see the end of the section. This section has some calculations on it. The problem is that I have a calculate button on the top of the section so when the user wants to recalculate it they have to scroll to the top again to see the button.

Is there any possibility to get the location when the user reached a certain location so it would trigger a ng-if with an overlay button.

Thanks, Brent

Answer 1

You can use the JQuery .scroll(), it might look like this:

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $document) { $scope.pos = { scrollPos:0 }; $("#outer").scroll(function() { $scope.pos.scrollPos = $("#outer").scrollTop().valueOf(); $scope.$apply(); }); }); 

 #outer { overflow: auto; height: 250px; width: 200px; border: solid 1px #ccc; } .inner { height: 1000px; position: relative; width: 198px; } .top { position: absolute; top: 0px; } .bottom { position: absolute; bottom: 0px; } .scrolled { position: fixed; top: 30px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> {{pos.scrollPos}}<br> <div id="outer"> <div class="inner"> <div class="scrolled ng-hide" ng-show="pos.scrollPos > 50">Passed Point.</div> <div class="top">Top</div> <div class="bottom">Bottom</div> </div> </div> </div> 

Answer 2

Yes this can be achieved with javascript try reading through this article on Mozilla it will help you achieve your goal, basically it lets you know the position of the mouse on the client. Apart from this if there is a specific element on the page that you need to know if the cursor is inside you can use Jquery and mouseenter event and then trigger some action.