I'm trying to find a way so that I can 'stack' affixed elements as I scroll down the page. I need to have the elements be able to see that there are other affixed elements above in in the DOM tree and be able to adjust their offsets accordingly. Is there something like that out there?
Here's a fiddle that has a simplified layout of the app I'm trying to accomplish this on: http://jsfiddle.net/mxu6t1d0/ I've been running into an reoccurring problem with this on an app I'm working on. I've tried quite a few different directives and hacks trying to get it working properly (using a provider right now, and it's super hacky + it doesn't work 100%). Here's the provider: .provider('affix', function() { > this.$get = function($window, $rootScope, $timeout) { > var affix = {}; > var doc = window.document; > var affix_wrapper, affix_els; > > > affix.update = function() { > function checkAffix() { > > > var scrollTop = (window.pageYOffset || doc.scrollTop || 0) > - (doc.clientTop || 0); > > > angular.forEach(affix_els, function(el) { > > > if (!el.cloneRel && el.offsetTop < scrollTop + > affix_wrapper.clientHeight && el.parentNode) { //add affix > > > var placeholder_el = el.cloneNode(true); > placeholder_el.classList.add('affix-placeholder'); > > > el.parentNode.insertBefore(placeholder_el, > el.nextSibling); > affix_wrapper.appendChild(el); > > > el.classList.add('affixed'); > > > el.cloneRel = placeholder_el; > } else if (el.cloneRel && (el.cloneRel.offsetTop > > scrollTop + affix_wrapper.clientHeight - el.clientHeight || !scrollTop)) { > //remove affix > el.cloneRel.parentNode.insertBefore(el, > el.cloneRel.nextSibling); > el.cloneRel.parentNode.removeChild(el.cloneRel); > > > el.classList.remove('affixed'); > el.classList.remove('affix-placeholder'); > el.cloneRel.classList.remove('affix-placeholder'); > delete(el.cloneRel); > } > > > }); > } > > > function initAffix() { > //reset affix wrapper > var content_container = > angular.element(doc.querySelector('#content-container')); > > > if (affix_wrapper) > content_container[0].removeChild(document.getElementById('affix-wrapper')); > > > affix_wrapper = doc.createElement('div'); > affix_wrapper.id = 'affix-wrapper'; > > > content_container.append(affix_wrapper); > affix_els = doc.querySelectorAll('.affix-top'); > } > > > function scrollEvent() { > if (affix_els) checkAffix(); > } > > > $rootScope.$on('$stateChangeStart', function() { > angular.element($window).off('scroll', scrollEvent); > }); > > > $rootScope.$on('$stateChangeSuccess', function() { > angular.element($window).off('scroll', scrollEvent); > }); > > > $rootScope.$on('$viewContentLoaded', function() { > $timeout(function() { > initAffix(); > checkAffix(); > angular.element($window).on('scroll', scrollEvent); > }); > }); > > > }; > return affix; > }; > }); > I'd rather have it be a directive (I think that's more of the 'Angular' way) so that it won't be so hacky. -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
