2 * Angular Material Design
3 * https://github.com/angular/material
7 (function( window, angular, undefined ){
12 * @name material.components.sticky
15 * Sticky effects for md
18 angular.module('material.components.sticky', [
20 'material.components.content'
22 .factory('$mdSticky', MdSticky);
27 * @module material.components.sticky
30 * The `$mdSticky`service provides a mixin to make elements sticky.
32 * @returns A `$mdSticky` function that takes three arguments:
34 * - `element`: The element that will be 'sticky'
35 * - `elementClone`: A clone of the element, that will be shown
36 * when the user starts scrolling past the original element.
37 * If not provided, it will use the result of `element.clone()`.
40 function MdSticky($document, $mdConstant, $compile, $$rAF, $mdUtil) {
42 var browserStickySupport = checkStickySupport();
45 * Registers an element as sticky, used internally by directives to register themselves
47 return function registerStickyElement(scope, element, stickyClone) {
48 var contentCtrl = element.controller('mdContent');
49 if (!contentCtrl) return;
51 if (browserStickySupport) {
53 position: browserStickySupport,
58 var $$sticky = contentCtrl.$element.data('$$sticky');
60 $$sticky = setupSticky(contentCtrl);
61 contentCtrl.$element.data('$$sticky', $$sticky);
64 var deregister = $$sticky.add(element, stickyClone || element.clone());
65 scope.$on('$destroy', deregister);
69 function setupSticky(contentCtrl) {
70 var contentEl = contentCtrl.$element;
72 // Refresh elements is very expensive, so we use the debounced
73 // version when possible.
74 var debouncedRefreshElements = $$rAF.throttle(refreshElements);
76 // setupAugmentedScrollEvents gives us `$scrollstart` and `$scroll`,
77 // more reliable than `scroll` on android.
78 setupAugmentedScrollEvents(contentEl);
79 contentEl.on('$scrollstart', debouncedRefreshElements);
80 contentEl.on('$scroll', onScroll);
83 var stickyBaseoffset = contentEl.prop('offsetTop');
86 current: null, //the currently stickied item
90 refreshElements: refreshElements
96 // Add an element and its sticky clone to this content's sticky collection
97 function add(element, stickyClone) {
98 stickyClone.addClass('md-sticky-clone');
99 stickyClone.css('top', stickyBaseoffset + 'px');
105 self.items.push(item);
107 contentEl.parent().prepend(item.clone);
109 debouncedRefreshElements();
111 return function remove() {
112 self.items.forEach(function(item, index) {
113 if (item.element[0] === element[0]) {
114 self.items.splice(index, 1);
118 debouncedRefreshElements();
122 function refreshElements() {
123 // Sort our collection of elements by their current position in the DOM.
124 // We need to do this because our elements' order of being added may not
125 // be the same as their order of display.
126 self.items.forEach(refreshPosition);
127 self.items = self.items.sort(function(a, b) {
128 return a.top < b.top ? -1 : 1;
131 // Find which item in the list should be active,
132 // based upon the content's current scroll position
134 var currentScrollTop = contentEl.prop('scrollTop');
135 for (var i = self.items.length - 1; i >= 0; i--) {
136 if (currentScrollTop > self.items[i].top) {
137 item = self.items[i];
141 setCurrentItem(item);
149 // Find the `top` of an item relative to the content element,
150 // and also the height.
151 function refreshPosition(item) {
152 // Find the top of an item by adding to the offsetHeight until we reach the
154 var current = item.element[0];
157 while (current && current !== contentEl[0]) {
158 item.top += current.offsetTop;
159 item.left += current.offsetLeft;
160 current = current.offsetParent;
162 item.height = item.element.prop('offsetHeight');
163 item.clone.css('margin-left', item.left + 'px');
164 if ($mdUtil.floatingScrollbars()) {
165 item.clone.css('margin-right', '0');
170 // As we scroll, push in and select the correct sticky element.
171 function onScroll() {
172 var scrollTop = contentEl.prop('scrollTop');
173 var isScrollingDown = scrollTop > (onScroll.prevScrollTop || 0);
174 onScroll.prevScrollTop = scrollTop;
177 if (scrollTop === 0) {
178 setCurrentItem(null);
180 // Going to next item?
181 } else if (isScrollingDown && self.next) {
182 if (self.next.top - scrollTop <= 0) {
183 // Sticky the next item if we've scrolled past its position.
184 setCurrentItem(self.next);
185 } else if (self.current) {
186 // Push the current item up when we're almost at the next item.
187 if (self.next.top - scrollTop <= self.next.height) {
188 translate(self.current, self.next.top - self.next.height - scrollTop);
190 translate(self.current, null);
194 // Scrolling up with a current sticky item?
195 } else if (!isScrollingDown && self.current) {
196 if (scrollTop < self.current.top) {
197 // Sticky the previous item if we've scrolled up past
198 // the original position of the currently stickied item.
199 setCurrentItem(self.prev);
201 // Scrolling up, and just bumping into the item above (just set to current)?
202 // If we have a next item bumping into the current item, translate
203 // the current item up from the top as it scrolls into view.
204 if (self.current && self.next) {
205 if (scrollTop >= self.next.top - self.current.height) {
206 translate(self.current, self.next.top - scrollTop - self.current.height);
208 translate(self.current, null);
214 function setCurrentItem(item) {
215 if (self.current === item) return;
216 // Deactivate currently active item
218 translate(self.current, null);
219 setStickyState(self.current, null);
222 // Activate new item if given
224 setStickyState(item, 'active');
228 var index = self.items.indexOf(item);
229 // If index === -1, index + 1 = 0. It works out.
230 self.next = self.items[index + 1];
231 self.prev = self.items[index - 1];
232 setStickyState(self.next, 'next');
233 setStickyState(self.prev, 'prev');
236 function setStickyState(item, state) {
237 if (!item || item.state === state) return;
239 item.clone.attr('sticky-prev-state', item.state);
240 item.element.attr('sticky-prev-state', item.state);
242 item.clone.attr('sticky-state', state);
243 item.element.attr('sticky-state', state);
247 function translate(item, amount) {
249 if (amount === null || amount === undefined) {
250 if (item.translateY) {
251 item.translateY = null;
252 item.clone.css($mdConstant.CSS.TRANSFORM, '');
255 item.translateY = amount;
257 $mdConstant.CSS.TRANSFORM,
258 'translate3d(' + item.left + 'px,' + amount + 'px,0)'
264 // Function to check for browser sticky support
265 function checkStickySupport($el) {
267 var testEl = angular.element('<div>');
268 $document[0].body.appendChild(testEl[0]);
270 var stickyProps = ['sticky', '-webkit-sticky'];
271 for (var i = 0; i < stickyProps.length; ++i) {
272 testEl.css({position: stickyProps[i], top: 0, 'z-index': 2});
273 if (testEl.css('position') == stickyProps[i]) {
274 stickyProp = stickyProps[i];
282 // Android 4.4 don't accurately give scroll events.
283 // To fix this problem, we setup a fake scroll event. We say:
284 // > If a scroll or touchmove event has happened in the last DELAY milliseconds,
285 // then send a `$scroll` event every animationFrame.
286 // Additionally, we add $scrollstart and $scrollend events.
287 function setupAugmentedScrollEvents(element) {
288 var SCROLL_END_DELAY = 200;
291 element.on('scroll touchmove', function() {
294 $$rAF(loopScrollEvent);
295 element.triggerHandler('$scrollstart');
297 element.triggerHandler('$scroll');
298 lastScrollTime = +$mdUtil.now();
301 function loopScrollEvent() {
302 if (+$mdUtil.now() - lastScrollTime > SCROLL_END_DELAY) {
304 element.triggerHandler('$scrollend');
306 element.triggerHandler('$scroll');
307 $$rAF(loopScrollEvent);
313 MdSticky.$inject = ["$document", "$mdConstant", "$compile", "$$rAF", "$mdUtil"];
315 })(window, window.angular);