Several sticky elements?

mckenzielong / MdSticky

Directive to make arbitrary elements sticky using ngMaterial's $mdSticky service

6 stars 1 forks source link

Several sticky elements? #1

Open mackelito opened 8 years ago

mackelito commented 8 years ago

Would be great to support several sticky elements :)

mckenzielong commented 8 years ago

:+1:

I should have some time tomorrow to see what I can do. Since this small script just uses the existing mdSticky service, it might be a good chunk of work.

mackelito commented 8 years ago

How would you go about solving this? What's the concept?

mckenzielong commented 8 years ago

I guess I should have asked you to clarify what you meant by "several sticky elements." In my head I had figured it was two content containers both having different sticky elements shown at once. I had something in mind like using mdComponentRegistry and grouping by parent. With the end goal of something like this working: http://codepen.io/mckenzielong/pen/RWdvLX -- to be honest I didn't know that was doable by the current mdSticky service (was thinking sticky service had actually worked like the bottom sheet service for some reason, and only allowed one element. It has been a while since I had poked around.)

So I am guessing we are talking about having child element stick on to a different sticky element. Something like this?

<md-content>
   <div md-sticky>Test</div>
   ...
   <md-content>
     <div md-sticky>Should stick to Test and not scroll away</div>
   </md-content>
   ...
</md-content>

mackelito commented 8 years ago

Yeah something like that!... What I'm currently looking at is to have a header and a sidenav sticky.

I know that I can achieve this with just using material html layouts.. the problem is that the site should be centered with margin on left/right... when adding margin: 0 auto; the page is not scrollable in the margin area, only when scrolling the site content (not the body).

mackelito commented 8 years ago

To be more clear this is my scenario:

<md-content layout-fill layout="column">
 <div the-margin>
  <header>
  <md-sidebar><md-content>
 </div>
</md-content>

(not correct markup... just to show you the example) :)

mackelito commented 8 years ago

Did you get a chance to digg into this? :)

mckenzielong commented 8 years ago

I only had a chance to take a quick look. This codepen ripped from material's sidenav demo kind of shows off what I would like to do some day where the grey element would attach to the yellow and stop at the next parent (the green)

Next we have this codepen which I think is closer to what you described. Beware - lots of bad behaviour in this...

Woefully this is going to take some major effort. At this point I would basically be writing my own (rather than this small wrapper.) I am willing to give this a shot, but can't guarantee any time line. I'll leave it up to you to close or keep this issue open (plus this will allow me to get rid of some existing bugs anyway... I originally did the wrapper for 0.8.x)