# angular-bootstrap-affix

**Repository Path**: mirrors_maxisam/angular-bootstrap-affix

## Basic Information

- **Project Name**: angular-bootstrap-affix
- **Description**: Affix directive for AngularJS inspired by Twitter Bootstrap
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-09
- **Last Updated**: 2026-08-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# bootstrap.affix

Pure AngularJS component replicating [Twitter Bootstrap's Affix](http://getbootstrap.com/javascript/#affix) component behavior.
The affix behavior enables dynamic pinning of a DOM element during page scrolling when specific conditions are met.

## Getting Started

+ Install with bower, `bower install angular-bootstrap-affix --save`

+ Or download the [production version][min] or the [development version][max].

[min]: https://raw.github.com/mgcrea/jquery-bootstrap-affix/master/dist/angular-bootstrap-affix.min.js
[max]: https://raw.github.com/mgcrea/jquery-bootstrap-affix/master/dist/angular-bootstrap-affix.js

In your web page:

```html
<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:

```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](http://getbootstrap.com/javascript/#affix) docs.

## Examples

```html
<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
}
```