Create helper for sticky positioning

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.

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.

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).

@rolandjitsu

@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>

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. 👍

@btroncone

@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

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

Would this be better implemented in flex-layout?

@trainerbill

@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.

will this feature be implemented?

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! 🎆 😛

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

@odahcam

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.

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

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. 🤔

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> .

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.

is this issue closed by #11483?

@michaeljota

@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.

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.

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:

Update Angular CDK and Material to 6.3 (angular#474)

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.}

Navigation Menu

Repository navigation

Create helper for sticky positioning #474

19 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Create helper for sticky positioning #474

Description

Activity

devversion commented on May 19, 2016

rolandjitsu commented on Sep 24, 2016

jefferson-willian commented on Nov 28, 2016

btroncone commented on Jan 10, 2017

devversion commented on Jan 10, 2017

btroncone commented on Jan 10, 2017

trainerbill commented on Jan 11, 2017

devversion commented on Jan 11, 2017

f-mon commented on Mar 19, 2017

19 remaining items

jofftiquez commented on May 25, 2018

odahcam commented on May 25, 2018

reppners commented on Jun 1, 2018

pppdns commented on Jun 1, 2018

odahcam commented on Jun 1, 2018

jeremyputeaux commented on Jun 1, 2018

michaeljota commented on Jun 1, 2018

paulmelero commented on Jun 27, 2018

odahcam commented on Jun 27, 2018

jelbourn commented on Oct 5, 2018

odahcam commented on Oct 5, 2018

angular-automatic-lock-bot commented on Sep 9, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions