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 and helpers.debounce modules 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-offset-top="".

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 | HTML string | DOMElement If provided, the affix will be positioned relative to a parent element. If a numeric value is present, the affix will try to find a parent that is N parents "up" in the DOM tree. If a non-numeric value is provided, the value is treated as an HTML string or DOMElement and constructed via angular.element(element).
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, {
              offsetTop: 100
            });
          })