stickUp2
a jQuery plugin
A simple plugin that "sticks" elements to the top of the browser window while scrolling past it. For better experience it optionally offers autohide with reappearence after scrolling up.
Please Visit the GitHub Page for installation instructions.
Updated version
This version contains a major code cleanup with several improvements
- [+] multiple instances possible
- [+] sticky sidebar feature (with elements bigger than viewport)
- [+] fancy autohiding of sticked elements which reappear on scroll up
- [-] no more one pager highlighting features
##Configuration options
###General
scrollHide
When ticked stickUp will keep the element hidden when scrolling past it but show it immediatly when scrolling up again (like adressbar in Chrome for Android). This feature allows better screen space usage while offering the sleek UI shortcut of standard sticking behavoiur.
Only works with elements smaller than viewport.
default: true options: integer
lazyHeight
Similar to scrollHide but not hiding element. It rather adds the set value while scrolling up. Good for streamlining appearance and avoid overlapping when introducing multiple sticky elements with one autoHiding at top.
default: 0 options: integer
topMargin
option to control margin of sticked element
default: 'auto' options: 'auto', number, '10px'
disableOn (>2.2.0)
Option to disable scrollUp if passed function returns false
default: 'function(){return true}' options: function example: function(){ if( $(window).width() < 768 ) return false; return true; }
namespaceClass (>2.3.0)
option to control set the class which is added to the main element to which stickUp is applied
default: 'stuckElement' options: string
fixedClass (>2.3.0)
option to set the class which is added to the main element to which stickUp is applied when in fixed state
default: 'isStuck' options: string
keepInWrapper
option to control wether the sticked element is caught in a wrapping container
default: false options: boolean
wrapperSelector
selector of container to hold the sticky element
(only in conjunction with keepInWrapper)
default: '' // uses first parent if empty options: 'selector'
syncPosition
forces stickUp to synchronize left position
(use if positioning needed for example with margin auto)
default: false options: boolean
Events
stickUp:beforeStick
The event is called before the element is stick. User has a capability to cancel stick operation.
Arguments:
cancel: bool
stickUp:stick
The event is called when the element is stick.
stickUp:beforeUnstick
The event is called before the element is unstick. User has a capability to cancel unstick operation.
Arguments:
cancel: bool
stickUp:unstick
The event is called when the element is unstick.
stickUp:scroll
The event is called when user is scrolling the window.
stickUp:resize
The event is called when the viewport is resized, second passed parameter is the options object to change options on the fly
WANTED: Contribution
Tests
- test environment needed to avoid manual testing failure
- test cases covering all special scenarios
Events / API / Architecture
- emission of events on state change
- API to control status of stickUp
- rework jQuery plugin pattern (better module?)
- Angular directive
The original (v1) implementation can be found at [LiranCohen repository](https://github.com/LiranCohen/stickUp
stickUp2 is a substantial rebuild and published under MIT