Here we show two snall directives that help to build fixed menu bar in your angularjs application.

There are two ideas behind:

1. Expose element's bounds into a scope for a manipulation (ui-bounds directive).
2. Allow to react to scroll DOM event (ui-scroll directive).

Directive implementation is very simple. See bounds.html at GitHub.

The use cases are also trivial to unerstand and implement. Take a look at two of them.

1. Fixed menu:

   <div ng-style="{paddingTop: headerBounds.height.toFixed() + 'px' }">
     <div style="position: fixed; z-index: 1; top: 0; width: 100%; background: menu" 
       ui-bounds="headerBounds">My header</div>
     <div>
       long content that produces a scroll bar.
     </div>
   </div>

2. Synchronized scroll of table header

   <div style="width: 50em; overflow: hidden; background: pink">
     <div style="position: relative" 
       ng-style="{left: bodyBounds.left.toFixed() + 'px'}">header...<div>
   </div>
   <div style="width: 50em; height: 5em; overflow: auto; background: blue"
     ui-scroll>
     <div ui-bounds="bodyBounds">body...</div>
   </div>

You can see the demo at: nesterovsky-bros/angularjs-api/master/angularjs/bounds.html.