How to fix an element after scroll in an AngularJS webpage

I started using MikeJ's great answer to get started, but quickly realized a few shortcomings:

1. Didn't account for when content above the element changes dynamically after the directive is first parsed
2. Content below the fixed element moved up the height of the element when it became fixed and was removed from the normal document flow
3. If this element is being fixed below something else (like a top menu) you may have some trouble calculating the right spot; you need to fix it before the offset top is past where the $win.scrollTop() is, so that it doesn't disappear behind that menu and then get fixed after.

To fix these, I came up with a modified version:

function setClassWhenAtTop($window) {
    var $win = angular.element($window);

    return {
        restrict: "A",
        link: function (scope, element, attrs) {
            var topClass = attrs.setClassWhenAtTop,
                topPadding = parseInt(attrs.paddingWhenAtTop, 10),
                parent = element.parent(),
                offsetTop;

            $win.on("scroll", function () {
                // dynamic page layout so have to recalculate every time;
                // take offset of parent because after the element gets fixed
                // it now has a different offset from the top
                offsetTop = parent.offset().top - topPadding;
                if ($win.scrollTop() >= offsetTop) {
                    element.addClass(topClass);
                    parent.height(element.height());
                } else {
                    element.removeClass(topClass);
                    parent.css("height", null);
                }
            });
        }
    };
}

This requires the element you are fixing to be wrapped in an empty parent that only contains the element to fix. This is to handle both knowing where the original offset of the element was (for putting it back into the document flow) and to have the height of the original element to keep the document flow as it was. In addition, pass in an attribute for paddingWhenAtTop to fix it sooner (or later if desired).

Usage in the HTML changes like so:

<div>
  <ul class="nav nav-justified" set-class-when-at-top="fix-to-top" padding-when-at-top="50">
</div>

Here is my attempt to make it full angularjs :

JS

.directive('setClassWhenAtTop', ['$window', function($window) {
    var $win = angular.element($window); // wrap window object as jQuery object

    return {
        restrict: 'A',
        link: function (scope, element, attrs)
        {
            var topClass = attrs.setClassWhenAtTop, // get CSS class from directive's attribute value
                topPadding = parseInt(attrs.paddingWhenAtTop, 10),
                offsetTop = element.prop('offsetTop'); // get element's offset top relative to document

            $win.on('scroll', function (e) {
                if ($window.pageYOffset + topPadding >= offsetTop) {
                    element.addClass(topClass);
                } else {
                    element.removeClass(topClass);
                }
            });
        }
    };
}])

CSS

.fix-to-top {
    position: fixed;
    top: 55px;
    height: 50px;
    z-index: 999;
    width: 100%;
}

HTML

<div class="navigation-bar" set-class-when-at-top="fix-to-top" padding-when-at-top="55"> 
...

Main changes to skip jquery :

parent.offset().top => element.prop('offsetTop')
$win.scrollTop() => $window.pageYOffset

Tip of the day : Would you please stop always giving angularjs title questions jquery answers ! Or at least indicate it clearly in your title or in your answer requirements ;-)