Skip to content

Instantly share code, notes, and snippets.

@JobaDiniz
Last active January 24, 2018 05:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save JobaDiniz/c14280ca3d7f33ca4287 to your computer and use it in GitHub Desktop.
Save JobaDiniz/c14280ca3d7f33ca4287 to your computer and use it in GitHub Desktop.
An improved headroom directive from https://github.com/WickyNilliams/headroom.js
<headroom class="headroom container" offset="50" ng-disabled="shouldDisableHeadroom()" on-top="isOnTop = true" on-not-top="isOnTop = false" classes='{"initial": "slide", "pinned": "slide--reset", "unpinned": "slide--up"}'>
<h1>My Content</h1>
</headroom>
angular.module('headroom', [])
.directive('headroom', function () {
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<div ng-transclude></div>',
link: function (scope, element, attrs) {
var headroom, options;
var setupOptions = function () {
if (options)
return;
options = [];
angular.forEach(Headroom.options, function (value, key) {
if (key == 'classes' && attrs[key])
options[key] = angular.fromJson(attrs[key]);
else
options[key] = attrs[key] || Headroom.options[key];
});
if (attrs.onPin) {
options.onPin = function () {
scope.$apply(attrs.onPin);
};
}
if (attrs.onUnpin) {
options.onUnpin = function () {
scope.$apply(attrs.onUnpin);
};
}
if (attrs.onTop) {
options.onTop = function () {
scope.$apply(attrs.onTop);
};
}
if (attrs.onNotTop) {
options.onNotTop = function () {
scope.$apply(attrs.onNotTop);
};
}
};
var initialize = function () {
setupOptions();
headroom = new Headroom(element[0], options);
headroom.init();
};
var destroy = function () {
if (headroom)
headroom.destroy();
};
attrs.$observe('disabled', function (value) {
if (angular.isUndefined(value))
return;
if (value === true)
destroy();
else
initialize();
});
scope.$on('$destroy', function () {
destroy();
});
}
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment