Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Affix directive for AngularJS inspired by Twitter Bootstrap
JavaScript
branch: master

This branch is 10 commits behind maxisam:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
dist
src
test
.editorconfig
.gitignore
.jshintrc
.travis.yml
CONTRIBUTING.md
Gruntfile.js
README.md
bower.json
karma.conf.js
package.json

README.md

bootstrap.affix

Pure AngularJS component replicating Twitter Bootstrap's Affix component behavior. The affix behavior enables dynamic pinning of a DOM element during page scrolling when specific conditions are met.

Getting Started

In your web page:

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-jquery/dist/angular-jquery.min.js"></script>
<script src="bower_components/angular-bootstrap-affix/dist/angular-bootstrap-affix.min.js"></script>
<script src="scripts/app.js"></script>

In your app.js:

angular.module('myApp', ['mgcrea.bootstrap.affix'])

Documentation

  • To easily add affix behavior to any element, just add bs-affix to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.

  • Check Twitter Bootstrap's Affix docs.

Examples

<div class="iphone" bs-affix data-offset-top="200" data-offset-bottom="300">
  <div class="iphone-content">
  </div>
</div>
Something went wrong with that request. Please try again.