title: AngularJS How to watch offset top position of elements?
body: <p>How to watch offset top position (of each element) and if the distance to top screen border lower than 100 px, i need to hide this div. (each div can move on page). Help please write Angular directive.</p>
  
  <p>I can't watch each element top offset.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('app', []);
  
  app.app.directive('blah', function() {
    return {
      restrict: 'A',
      link: function(scope, element) {
        element.show();
        scope.$watch(function() {
          return element.offset().top &gt; 120
        }, function(outOfBorder) {
          if (outOfBorder) {
            element.hide()
            console.log(outOfBorder)
          } else {
            element.show()
            console.log(outOfBorder)
          }
        });
      }
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.all {
  height: 100px;
  width: 300px;
   border:1px solid;
      overflow: scroll;
  }
  .elements {
  height: 30px;
  width: 300px;
   border:1px solid red;
  float: left;
    clear: both;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="all" ng-app="app"&gt;
  &lt;div class="elements" blah&gt;&lt;/div&gt;
  &lt;div class="elements" blah&gt;&lt;/div&gt;
  &lt;div class="elements" blah&gt;&lt;/div&gt;
  &lt;div class="elements" blah&gt;&lt;/div&gt;
  &lt;div class="elements" blah&gt;&lt;/div&gt;
  &lt;div class="elements" blah&gt;&lt;/div&gt;
  &lt;div class="elements" blah&gt;&lt;/div&gt;
  &lt;div class="elements" blah&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>