-
Notifications
You must be signed in to change notification settings - Fork 104
/
stop-scrolling-at-footer.js
139 lines (124 loc) · 4.14 KB
/
stop-scrolling-at-footer.js
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
// Stop scrolling at footer.
//
// This can be added to elements with `position: fixed` to stop them from
// overflowing on the footer.
//
// Usage:
//
// GOVUK.stopScrollingAtFooter.addEl($(node), $(node).height());
//
// Height is passed in separatly incase the scrolling element has no height
// itself.
;(function (global) {
'use strict'
var $ = global.jQuery
var GOVUK = global.GOVUK || {}
var stopScrollingAtFooter = {
_pollingId: null,
_isPolling: false,
_hasScrollEvt: false,
_els: [],
addEl: function ($fixedEl, height) {
var fixedOffset
if (!$fixedEl.length) { return }
fixedOffset = parseInt($fixedEl.css('top'), 10)
fixedOffset = isNaN(fixedOffset) ? 0 : fixedOffset
stopScrollingAtFooter.updateFooterTop()
$(global).on('govuk.pageSizeChanged', stopScrollingAtFooter.updateFooterTop)
var $siblingEl = $('<div></div>')
$siblingEl.insertBefore($fixedEl)
var fixedTop = $siblingEl.offset().top - $siblingEl.position().top
$siblingEl.remove()
var el = {
$fixedEl: $fixedEl,
height: height + fixedOffset,
fixedTop: height + fixedTop,
state: 'fixed'
}
stopScrollingAtFooter._els.push(el)
stopScrollingAtFooter.initTimeout()
},
updateFooterTop: function () {
var footer = $('.js-footer:eq(0)')
if (footer.length === 0) {
return 0
}
stopScrollingAtFooter.footerTop = footer.offset().top - 10
},
initTimeout: function () {
if (stopScrollingAtFooter._hasScrollEvt === false) {
$(window).scroll(stopScrollingAtFooter.onScroll)
stopScrollingAtFooter._hasScrollEvt = true
}
},
onScroll: function () {
if (stopScrollingAtFooter._isPolling === false) {
stopScrollingAtFooter.startPolling()
}
},
startPolling: (function () {
if (window.requestAnimationFrame) {
return function () {
var callback = function () {
stopScrollingAtFooter.checkScroll()
if (stopScrollingAtFooter._isPolling === true) {
stopScrollingAtFooter.startPolling()
}
}
stopScrollingAtFooter._pollingId = window.requestAnimationFrame(callback)
stopScrollingAtFooter._isPolling = true
}
} else {
return function () {
stopScrollingAtFooter._pollingId = window.setInterval(stopScrollingAtFooter.checkScroll, 16)
stopScrollingAtFooter._isPolling = true
}
}
}()),
stopPolling: (function () {
if (window.requestAnimationFrame) {
return function () {
window.cancelAnimationFrame(stopScrollingAtFooter._pollingId)
stopScrollingAtFooter._isPolling = false
}
} else {
return function () {
window.clearInterval(stopScrollingAtFooter._pollingId)
stopScrollingAtFooter._isPolling = false
}
}
}()),
checkScroll: function () {
var cachedScrollTop = $(window).scrollTop()
if ((cachedScrollTop < (stopScrollingAtFooter.cachedScrollTop + 2)) && (cachedScrollTop > (stopScrollingAtFooter.cachedScrollTop - 2))) {
stopScrollingAtFooter.stopPolling()
return
} else {
stopScrollingAtFooter.cachedScrollTop = cachedScrollTop
}
$.each(stopScrollingAtFooter._els, function (i, el) {
var bottomOfEl = cachedScrollTop + el.height
if (bottomOfEl > stopScrollingAtFooter.footerTop) {
stopScrollingAtFooter.stick(el)
} else {
stopScrollingAtFooter.unstick(el)
}
})
},
stick: function (el) {
if (el.state === 'fixed' && el.$fixedEl.css('position') === 'fixed') {
el.$fixedEl.css({ 'position': 'absolute', 'top': stopScrollingAtFooter.footerTop - el.fixedTop })
el.state = 'absolute'
}
},
unstick: function (el) {
if (el.state === 'absolute') {
el.$fixedEl.css({ 'position': '', 'top': '' })
el.state = 'fixed'
}
}
}
GOVUK.stopScrollingAtFooter = stopScrollingAtFooter
$(global).load(function () { $(global).trigger('govuk.pageSizeChanged') })
global.GOVUK = GOVUK
})(window)