Skip to content

Instantly share code, notes, and snippets.

@joelcrocker
Forked from guapodero/scrollfollow.coffee
Last active August 29, 2015 14:08
Show Gist options
  • Save joelcrocker/272f03409e482e57eb18 to your computer and use it in GitHub Desktop.
Save joelcrocker/272f03409e482e57eb18 to your computer and use it in GitHub Desktop.
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())
])
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment