Neverending Pile of Messages
    Wondering what’s next for npm?Check out our public roadmap! »

    ember-sticky-element

    0.2.3 • Public • Published

    ember-sticky-element

    Build Status Ember Observer Score npm version Greenkeeper badge

    This Ember addon gives you the ability to make parts of your UI stick to the viewport when scrolling. Its semantics follow roughly the proposed position: sticky specs.

    See the Demo App for some examples!

    Why should I use this

    The mentioned CSS extension of position: sticky is still in a draft stage, and not widely supported natively. While there are polyfills available, they lack some features:

    • you cannot change the styling of your sticky element based on its state of being sticky or not
    • you cannot dynamically change the contents of the sticky element based on that state either

    While there a probably a few jQuery plugins around for the same purpose, they might not always play well with Ember.

    So this addon adds a sticky-element component, that mimics the basic position: sticky behaviour. Currently it only supports scrolling in the vertical direction, not horizontal stickiness yet.

    It leverages ember-in-viewport under the hood for its efficient viewport detection techniques.

    How to use this

    Installation

    ember install ember-sticky-element

    Basic usage

    Just wrap your content into the sticky-element:

    {{#sticky-element}}
      <h2>Sticky Element</h2>
    {{/sticky-element}}

    This will make it flow with the other content when scrolling until it reaches the top of the viewport, at which point it will get sticky. This effectively makes it position: fixed. (Unfortunately for now this will require you to allow inline styles if you use CSP!)

    Customization options

    Offsets

    The behaviour of the component and its styling can be customized with the following options. Also see the Demo App for some examples.

    Top offset

    Add the top property to specify an offset in pixels from the top of the viewport:

    {{#sticky-element top=50}}
      <h2>Sticky Element</h2>
    {{/sticky-element}}

    Bottom offset

    By default the sticky element will not care about its parent enclosing element and just remain sticky to the top when scrolling the page all the way down. To make it also stick to the bottom of its parent (so it does not leave its parent's boundaries), just add the bottom property, with a value of 0 or some other offset:

    {{#sticky-element top=50 bottom=0}}
      <h2>Sticky Element</h2>
    {{/sticky-element}}

    Make sure that the parent element has some positioning applied, so at least position: relative, as sticking to the bottom is done by applying position: absolute to the sticky element!

    Disabling

    You can set the enabled property to false to disable the sticky behavior:

    {{#sticky-element enabled=someBooleanProperty}}
      <h2>Sticky Element</h2>
    {{/sticky-element}}

    Styling

    CSS

    The sticky element has a containerClassName property you can use for styling (by default .sticky-element). Furthermore additionals classes can be set: when being sticky:

    • containerStickyClassName (by default .sticky-element--sticky): when sticked either to the top or the bottom.
    • containerStickyTopClassName (by default .sticky-element--sticky-top): when sticked to the top.
    • containerStickyBottomClassName (by default .sticky-element--sticky-bottom): when sticked to the bottom.

    Content

    The component yields a hash, that contains the following boolean properties based on its state:

    • isSticky
    • isStickyTop
    • isStickyBottom

    You can use these to change the content of the sticky element based on its state:

    {{#sticky-element as |state|}}
      <h2>Sticky Element</h2>
      <p>{{#if state.isSticky}}Yeah, I am sticky!{{else}}I am just a normal element.{{/if}}</p>
    {{/sticky-element}}

    Install

    npm i ember-sticky-element

    DownloadsWeekly Downloads

    2,206

    Version

    0.2.3

    License

    MIT

    Unpacked Size

    238 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar