diff --git a/app/assets/javascripts/stick-to-window-when-scrolling.js b/app/assets/javascripts/stick-to-window-when-scrolling.js index bcc413084..e5b37e86e 100644 --- a/app/assets/javascripts/stick-to-window-when-scrolling.js +++ b/app/assets/javascripts/stick-to-window-when-scrolling.js @@ -141,6 +141,15 @@ // were wrapped by a dialog component var dialog = { _hasResized: false, + // we add padding of 20px around each sticky to isolate it from the rest of the page + // it shouldn't apply between stickys when stacked + _getPaddingBetweenEls: function (els) { + var spaceBetween = 40; + + if (els.length < 2) { return 0; } + + return (els.length - 1) * spaceBetween; + }, _getTotalHeight: function (els) { var reducer = function (accumulator, currentValue) { return accumulator + currentValue; @@ -152,6 +161,7 @@ }, getOffsetFromEdge: function (el, sticky) { var els = this._elsThatCanBeStuck(sticky._els).slice(); + var elsBetween; var elIdx; // els must be arranged furtherest from window edge is stuck to first @@ -165,10 +175,12 @@ // if next to window edge the dialog is stuck to, no offset if (elIdx === (els.length - 1)) { return 0; } + // make els all those from this one to the window edge + els = els.slice(elIdx); // get all els between this one and the window edge - els = els.slice(elIdx + 1); + elsBetween = els.slice(1); - return this._getTotalHeight(els); + return this._getTotalHeight(elsBetween) - this._getPaddingBetweenEls(els); }, getOffsetFromEnd: function (el, sticky) { var els = this._elsThatCanBeStuck(sticky._els).slice(); diff --git a/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss b/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss index 9c5cea1f1..1c0b85cf7 100644 --- a/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss +++ b/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss @@ -46,6 +46,10 @@ padding: $vertical-padding 0 $vertical-padding $gutter-half; margin-top: -$vertical-padding; + & + .js-stick-at-bottom-when-scrolling { + margin-top: ($vertical-padding * 2) * -1; + } + .page-footer { margin-bottom: 0; min-height: 50px;