-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathheadroom.js.jquery.txt
29 lines (27 loc) · 2.07 KB
/
headroom.js.jquery.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
┏━━━━━━━━━━━━━━━━━┓
┃ HEADROOM.JS ┃
┗━━━━━━━━━━━━━━━━━┛
new Headroom(ELEM) #Returns HEADROOM. Make navigation menu hide|reappear on scroll.
#Version 0.7.0
HEADROOM.init([OBJ]) #Adds|remove classes to JQ:
# - .headroom: always
# - .headroom--unpinned: when going from shown to hidden
# - .headroom--pinned: when going from hidden to shown
# - .headroom--[not-]top: when [not] above offset
#Must use CSS animation to achieve effect. Basic one can be:
# - .headroom { transition: transform 200ms linear; }
# - .headroom--pinned { transform: translateY(0%); }
# - .headroom--unpinned { transform: translateY(-100%); }
#OBJ:
# - offset NUM: number of pixels from top of page where bar is always shown
# - tolerance NUM or up|down NUM: number of pixels to scroll before changing state
# - classes.initial|pinned|unpinned|top|notTop: change default CSS class
# - scroller ELEM (def: window): element to listen to the scrolling
# - onPin|onUnpin()
# - onTop|onNotTop()
HEADROOM.destroy() #
JQ.headroom([OBJ]) #Same but with jQuery.
JQ.headroom("destroy")
JQ.data("headroom") #Returns HEADROOM
data-headroom #HTTP attribute: fire JQ.headroom() on script load. Pass options OBJ.VAR as data-VAR.
headroom #Angular directive. Options are passed as HTTP attributes.