AngularJS Directive: {Position: Sticky}

sticky.coffee

# to provide a fallback for the new CSS property, position: sticky;
# which let an element stays where it is when it's within the screen
# and when it's disappearing into the top of the page with scrolling,
# change the position's behavior to fix.

app.directive 'sticky', ($window, WindowObj) ->
  restrict: 'A'
  link: (scope, element, attr) ->
    sticky = undefined
    originalOffsetY = element[0].offsetTop
    
    # this needs to be used together with directive SCROLL
    # and with a $scope.$broadcast('scroll::scroll')
    scope.$on 'scroll::scroll', ->
      if originalOffsetY < WindowObj.scrollY
        return if sticky is true
        sticky = true
        element.addClass('sticky')
      else
        return if sticky is false
        sticky = false
        element.removeClass('sticky')