darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-23 15:57:23 -04:00
Code Issues Packages Projects Releases Wiki Activity

Record height of each sticky element

Browse Source 
Function borrowed from stop-at-bottom JS.
This commit is contained in:
Tom Byers
2018-11-04 21:10:02 +00:00
parent 53d43073ef
commit ef76d4eeb3
1 changed files with 28 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
app/assets/javascripts/stick-at-top-when-scrolling.js
View File

@@ -10,6 +10,7 @@
_scrollTimeout: false, _scrollTimeout: false,
_hasResized: false, _hasResized: false,
_resizeTimeout: false, _resizeTimeout: false,
_els: [],
getWindowDimensions: function () { getWindowDimensions: function () {
return { return {
@@ -25,15 +26,35 @@
getElementOffset: function ($el) { getElementOffset: function ($el) {
return $el.offset() return $el.offset()
}, },
setElHeight: function (el) {
var fixedOffset = parseInt(el.$fixedEl.css('top'), 10)
var $el = el.$fixedEl
var $img = $el.find('img')
fixedOffset = isNaN(fixedOffset) ? 0 : fixedOffset
if ($img.length > 0) {
var image = new global.Image()
image.onload = function () {
el.height = $el.outerHeight() + fixedOffset
}
image.src = $img.attr('src')
} else {
el.height = $el.outerHeight() + fixedOffset
}
},
init: function () { init: function () {
var $els = $('.js-stick-at-top-when-scrolling') var $els = $('.js-stick-at-top-when-scrolling')
if ($els.length > 0) { if ($els.length > 0) {
sticky.$els = $els
$els.each(function (i, el) { $els.each(function (i, el) {
var $el = $(el) var $el = $(el)
var el = {
$fixedEl: $el
}
sticky.setElHeight(el)
sticky._els.push(el)
$el.data('scrolled-from', sticky.getElementOffset($el).top) $el.data('scrolled-from', sticky.getElementOffset($el).top)
}) })
@@ -47,20 +68,6 @@
sticky._resizeTimeout = global.setInterval(sticky.checkResize, 50) sticky._resizeTimeout = global.setInterval(sticky.checkResize, 50)
} }
} }
if (GOVUK.stopScrollingAtFooter) {
$els.each(function (i, el) {
var $img = $(el).find('img')
if ($img.length > 0) {
var image = new global.Image()
image.onload = function () {
GOVUK.stopScrollingAtFooter.addEl($(el), $(el).outerHeight())
}
image.src = $img.attr('src')
} else {
GOVUK.stopScrollingAtFooter.addEl($(el), $(el).outerHeight())
}
})
}
}, },
onScroll: function () { onScroll: function () {
sticky._hasScrolled = true sticky._hasScrolled = true
@@ -79,8 +86,8 @@
var windowDimensions = sticky.getWindowDimensions() var windowDimensions = sticky.getWindowDimensions()
sticky.$els.each(function (i, el) { $.each(sticky._els, function (i, el) {
var $el = $(el) var $el = el.$fixedEl
var scrolledFrom = $el.data('scrolled-from') var scrolledFrom = $el.data('scrolled-from')
if (scrolledFrom && sticky.scrolledFromInsideWindow(scrolledFrom)) { if (scrolledFrom && sticky.scrolledFromInsideWindow(scrolledFrom)) {
@@ -97,8 +104,8 @@
var windowDimensions = sticky.getWindowDimensions() var windowDimensions = sticky.getWindowDimensions()
sticky.$els.each(function (i, el) { $.each(sticky._els, function (i, el) {
var $el = $(el) var $el = el.$fixedEl
var elResize = $el.hasClass('js-sticky-resize') var elResize = $el.hasClass('js-sticky-resize')
if (elResize) { if (elResize) {