Affix affix.js

mgcrea.ngStrap.affix

Examples

The subnavigation on the left is a live demo of the affix plugin.

Plugin dependency

Affix require the helpers.dimensions module to be loaded.

      
        <div class="bs-sidebar hidden-print" role="complementary" data-offset-top="-80" bs-affix></div>

Usage

Append a bs-affixattribute to any element to enable the plugin.

You can affix inside a custom container with the bs-affix-target attribute added to any parent element.

The module also exposes an $affixservice

Available for programmatic use (mainly inside a directive as it requires an element).

        
          var affix = $affix(element, options);

Options

Options can be passed via data-attributes on the directive or as an object hash to configure the service. For data attributes, append the option name to data-, as in data-animation="".

Name type default description
offsetTop number 0 Pixels to offset from top of screen when calculating position of scroll.
offsetBottom number 0 Pixels to offset from bottom of screen when calculating position of scroll.
offsetParent number 0 Pixels to offset from parent when calculating position of scroll.
offsetUnpin number 0 Pixels to offset from unpin position when calculating position of scroll.

Default options

You can override global defaults for the plugin with $affixProvider.defaults

        
          angular.module('myApp')
          .config(function($affixProvider) {
            angular.extend($affixProvider.defaults, {
              animation: 'am-fade-and-slide-top',
              placement: 'top'
            });
          })