Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/redapesolutions/angular-sticktotop
Set of directives for stick to top headers
https://github.com/redapesolutions/angular-sticktotop
Last synced: 2 days ago
JSON representation
Set of directives for stick to top headers
- Host: GitHub
- URL: https://github.com/redapesolutions/angular-sticktotop
- Owner: redapesolutions
- Created: 2014-08-19T03:24:40.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2015-12-06T22:43:14.000Z (almost 9 years ago)
- Last Synced: 2023-08-06T12:03:18.769Z (over 1 year ago)
- Language: CSS
- Size: 18.6 KB
- Stars: 1
- Watchers: 4
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Note
This project is not maintained anymore. For a similar solution in Angular, check out [Angular Material's subheader](https://material.angularjs.org/latest/demo/subheader)
# Stick to top directive
Angular directive that allows divs to stay at the top of their container when scrolling down.
Allows for several containers, each having one or more sticky divs.
Uses Angular expressions to trigger on stick and on unstick callbacks.
## Features
- Container directive and sticky div directive allow for several scrollable areas to be controlled
- CSS focused
- Read position either on directive creation or live (for unknown height content)
- Position offset at which div is considered "out"
- onStick and onUnstick scope bindings with optional $index, $scrollPosition and $event available in the expression
## Sample usage
HTML:
```
Some content here
This will stick to top of container
More content .....
```
CSS (available in angular-sticktotop.css):
```
.out-of-view {
visibility: hidden;
}
.sticky-div-copy {
display: none;
position: fixed;
top: 0px;
}
.sticky-div-original {
position: relative;
}
.sticky-div-copy.out-of-view {
visibility: visible;
display: block;
}
[sticky-container] {
overflow-y: scroll;
}
```
## Install
Add `angular-sticktotop.js` to your html
## Dependencies
None, although if lodash is available (as window._), it will be used for the throttling of the scroll event
## Examples
Run a http server at the root directory e.g.
```
python -m SimpleHTTPServer
```
and view examples/......./index.html
## sticky-container
This is the scrollable reference element.
### Options
All options are available as attributes of the directive
- *scrollPeriod*: Number of milliseconds for throttling of scroll event. Defaults to 50ms.
## sticky-div
This directive requires the sticky container directive as one of its parens. The elements whose position is watched and compared to the current scroll value.
### Original and copy
The directive creates a copy of the original element and inserts it into the DOM just after the original element. The original element receives a CSS class 'sticky-div-original' and the copy receives the class 'sticky-div-copy'.
### Options
All options are available as attributes of the directive
- *outOfViewClass* : Class name to be added to both the original and copy elements when original is out of the view. Defaults to 'out-of-view'
- *stickyOffset* : Number of pixels from top of container that will be considered as "out of view". Evaluated as Angular expression, so numbers work (sticky-offset="50") but scope variables or functions are also acceptable (sticky-offset="myOffset()"). Defaults to 0. See the stackheaders example
- *liveOffset* : If set, the position of the sticky div within the container will be evaluated each time the scroll event is triggered. Useful if some content above the sticky div changes in height. But comes at a cost in terms of resources.
- *onStick* : An Angular expression (has to be a function) which will be called when the div becomes stuck at the top. Exposes $index, $scrollPosition and $event as special keywords which will receive respectively the index of the sticky div (within this container), the scroll position (in px from top of this container) and the scroll event object.
- *onUnstick* : see onStick