ngsticky-liberty – A simple, pure javascript (No jQuery required!) AngularJS … #npm #javascript #nodejs

  • AngularJS directive to make elements stick when scrolling down.
  • js file in your page then enable usage of the directive by including the “sticky” module as a dependency.
  • Use the directive as follows:

    To toggle the element stickiness you can bind with scope using the disabled-sticky (ng-model) as follows :

    To make the element stick within a certain offset of the top of the screen, you can provide an offset as follows:

    By default the element will be replaced with a place holder to prevent DOM resizing.

  • This can be disabled as follows:

    If you want to customize the style while the element is sticky, we have an api for you too:

    And if you want to customize the body style while the element is sticky:

    And if you want to add in a class when the element is confined and bottomed out:

    It’s also possible to set styles specifically for non sticky element:

    In order to enable sticky based on a media query:

    If you want the sticky element to be scrollable only if it’s smaller then the window inner height then you can set the attribute:

    And if you want to confine an element to its parent, and let it ‘bottom out’, just add the attribute:

    If you’d like to use an element’s overflow-y instead of the window scrollbar.

  • You can use the “sticky-scroll” element to denote an element styled to handle this.

A simple, pure javascript (No jQuery required!) AngularJS directive to make elements stick when scrolling down.

@npmdaily: ngsticky-liberty – A simple, pure javascript (No jQuery required!) AngularJS … #npm #javascript #nodejs

ngsticky-liberty – A simple, pure javascript (No jQuery required!) AngularJS directive to make elements stick when scrolling down.

A simple, pure javascript (No jQuery required!) AngularJS directive to make elements stick when scrolling down.

Allows use of an offset so elements can be stuck to eg. 50px from the top of the browser

Recalculates element position on page load and on window resize

Clean: No external CSS or jQuery required, and it only adds the classes you specify.

Install with bower:

Include the .js file in your page then enable usage of the directive by including the “sticky” module as a dependency. Use the directive as follows:

To toggle the element stickiness you can bind with scope using the disabled-sticky (ng-model) as follows

{{ disabled = true }}

To make the element stick within a certain offset of the top of the screen, you can provide an offset as follows:

By default the element will be replaced with a place holder to prevent DOM resizing. This can be disabled as follows:

If you want to customize the style while the element is sticky, we have an api for you too:

And if you want to customize the body style while the element is sticky:

And if you want to add in a class when the element is confined and bottomed out:

It’s also possible to set styles specifically for non sticky element:

In order to enable sticky based on a media query:

If you want the sticky element to be scrollable only if it’s smaller then the window inner height then you can set the

stick-limit

attribute:

And if you want to confine an element to its parent, and let it ‘bottom out’, just add the

confine

attribute:

If you’d like to use an element’s overflow-y instead of the window scrollbar. You can use the “sticky-scroll” element to denote an element styled to handle this.

NOTE: This doesn’t work for bottomed out or position absolute elements.

To start the development server:

To create the minified

file, run:

Cheers.

ngsticky-liberty

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.