Create helper for sticky positioning

[jraadt]

• Do you want to request a feature or report a bug?
  feature
• What is the current behavior?
  There is no $mdSticky for components like md-subheader inside a md-list.
• What is the expected behavior?
  I would expect a service like $mdSticky from Material v1 to allow components like md-subheader inside a md-list to stick when scrolling.
• What is the motivation / use case for changing the behavior?
  To provide the same functionality that is present in Material v1.

[devversion]

Once this feature will be added, we should test that really thoroughly.

• The current implementation in Material 1, is shaking on several touch devices / browsers.

It should also check, if the current browser supports sticky positions natively.

[rolandjitsu]

At least the toolbars should be something we can make sticky. It does look much better when the toolbar is always at the top while you scroll the content (in some cases).

[jefferson-willian]

@rolandjitsu actually you can do that with layouts. Just use two columns, one for the toolbar and another for a scrollable content. It would be something like that:

<div layout="row">
  <div layout="column" layout-fill>
    <md-toolbar>
      <div class="md-toolbar-tools">
        <h3>
          <span>Title</span>
        </h3>
      </div>
    </md-toolbar>
    <md-content flex>
    </md-content>
  </div>
</div>

[btroncone]

Any update or examples of this in practice? This would be a very helpful addition as the majority of MD layouts utilize a sticky header by default. 👍

[devversion]

@btroncone Thanks for the reminder. This feature hasn't been marked as a high priority for the beta, but I will try to look into it soon - Here is my (pretty old) proposal for this feature.

• See this Google Document

[btroncone]

That would be amazing, thanks for the feedback and quick response! 👍

[trainerbill]

Would this be better implemented in flex-layout?

[devversion]

@trainerbill I don't think that you can categorize this into flex-layout

As from the name, flex-layout is a set of directives to build a layout using Flexbox CSS - It should be part of Angular Material's component toolkit.

[f-mon]

will this feature be implemented?

[ashishdoneriya]

1 year and still open

[devversion]

@ashishdoneriya We are still in beta and other components have bigger priorities right now. This issue is just here for tracking.

[jofftiquez]

Guys what happened to the "This feature will be added"? :( I'm thinking of switching to Vue coz of it's material framework. Material 2 should be updated.

[ashishdoneriya]

Nice idea @jofftiquez . Thanks

[mackelito]

Has anyone tried out this? https://github.com/google/angular-sticky-element

[antonyRoberts]

@jelbourn and @kara. Has, there been any movement on this? It looks like the intern who was assigned to this, is no longer working on it.

[reppners]

Need to make a decision on a project wether to put effort into implementing sticky headers/look for an alternate implementation or wait on implementation in CDK/Material.

Is there any ETA or status on this feature that can help make this decision?

[pmsa29]

Where can I see the progress of this sticky-header, also is there a way to do master-detail?

[ashishdoneriya]

I think there is a special team for thumbs down every comment which is not in favour of material2.

[mackelito]

@jelbourn Is the sticky header in latest? (would love to test it out) :)

[tomgruszowski]

@mackelito given the issue backlog is 800+ long, I don't think this team has the bandwidth for anything but bugfixes. I still use bootstrap to complement my UIs as ng-material is severely lacking on so many things. The toolbar on the demo site is mostly custom code.

[mackelito]

@tomgruszowski sure.. but alot of the issues are P4's, several has PR's already etc etc.. It's not a surprise when a framework has this userbase ;)

[tomgruszowski]

I'm not going to lie, I wish this project moved way faster, but I'm sure they have their reasons. I think it's a pretty small team and many of them are fairly recent hires. Is AngularJS Material team still doing their own thing or have they all moved over?

[odahcam]

Wouldn't Popper.js be as useful as Hammer?

[michaeljota]

@odahcam Oh! God no... Please, just don't use Popper.JS. I'm sure it's great, but it's a real pain to integrate it with Angular. And I ain't sure how this could be integrated for this task.

[jofftiquez]

Wow I didn't know I got downvoted so hard on this thread hahahaha. There should be a notification for this. Guys! Switch to VueJs! It's better!

I'm kidding of course 😀 Enjoy the breaking changes! 🎆 😛

[odahcam]

Why not to just use position: sticky with some JS sticky polyfill?

[reppners]

As @odahcam points out recent browsers have sufficient support for position: sticky so this feature can be implemented quite easily.

Necessary styles:

.sticky-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

Personally I don't need to support ancient browsers that are not capable of doing it with pure css so no fancy JS polyfilling needed.

[pppdns]

Currently 14% from the global browser usage doesn't support position: sticky, most of them are 5 years old versions (e.g. IE11 from 2013)
https://caniuse.com/#search=sticky

[odahcam]

On the other side, I think this sticker helper may aim to add that behavior we see in mobile Chrome app bar that hides and shows up on scroll. 🤔

[jeremyputeaux]

Exactly. To me this helper is mainly supposed to stick and unstick on scroll. We see this behavior more and more often. Le ven. 1 juin 2018 14:26, Luiz Machado <notifications@github.com> a écrit :

…

On the other side, I think this sticker helper may aim to add that behavior we see in mobile Chrome app bar that hides and shows up on scroll. 🤔 — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#474 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AC97WUeqcES9cYpQhWkk6wvjOJs-34Epks5t4TMFgaJpZM4IiUSt> .

[michaeljota]

Angular should work with IE11 so I don't think this will be an actual option for the team. display: sticky only works out the box properly in 5% of the browsers. So even if they didn't have to support IE11, I don't think this is the way to go.

Regardless the scroll behavior, I think this could be easy doable with an scroll event, just changing the position of the sticky component.

[gangsthub]

is this issue closed by #11483?

[odahcam]

@michaeljota

Regardless the scroll behavior, I think this could be easy doable with an scroll event, just changing the position of the sticky component.

This certainty would be easy and awesome if it comes with the helper, would be from a great help.

[jelbourn]

Closing this since there are no plans to add this feature. We believe that using the native position: sticky is the best approach moving forward.

[odahcam]

As most of sticky positioned stuff is all about layout and does not blocks users of doing anything if it don't work and we have 85% of global support for this feature, I think you'r right.

Here's the current support status BTW:

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}