scrollfollow.coffee

angular.module("ui-utils-too", []).
  directive("scrollfollow", ["$window", ($window) ->
    restrict: "A"
    link: (scope, el, attrs) ->
      window = angular.element($window)
      parent = angular.element(el.parent())
      currentOffsetTop = el[0].getBoundingClientRect().top
      headerOffsetTop = scope.$eval(attrs.scrollfollow) or 5

      # assumes width/padding in px
      getParentWidth = ->
        returnDigit = (val) -> val.match(/\d+/)[0]
        returnDigit(parent.css("width")) -
        returnDigit(parent.css("padding-left")) -
        returnDigit(parent.css("padding-right"))

      handleSnapping = ->
        dynamicContent = $("#" + el.attr("id")).css("content")
        if (dynamicContent != "tablet" and
            window[0].scrollY > currentOffsetTop - headerOffsetTop)
          el.addClass("scrollfollowing")
          el.css(
            position: "fixed"
            top: headerOffsetTop + "px"
            width: getParentWidth()
          )
          el.next().css(height: el[0].offsetHeight, display: "block")
        else
          el.removeClass("scrollfollowing")
          el.css(position: "static", width: getParentWidth())
          el.next().css("display": "none")

      placeholder = document.createElement("div")
      placeholder.className = "scrollfollow_placeholder"
      placeholder.style.display = "none"
      el.after(placeholder)

      handleSnapping()
      window.bind "scroll", -> handleSnapping()
      window.bind "resize", -> el.css(width: getParentWidth())
  ])