Skip to content

mryarbles/angular-bootstrap-affix

 
 

Repository files navigation

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>

.affix-top {
    top: 30px; // css to define
}

.affix-bottom {
    bottom: 0; // css to define
}

About

Affix directive for AngularJS inspired by Twitter Bootstrap

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%