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

Add stop-at-bottom functionality

Browse Source 
Detach all methods from sticky reference so they
can be attached to different objects.

Split sticky into stickAtTop and stickAtBottom and
make new versions of all methods and properties
specific to stickAtBottom.

Add CSS for stickAtBottom and call on load
This commit is contained in:
Tom Byers
2018-11-05 17:47:25 +00:00
parent ef76d4eeb3
commit deaa253e65
3 changed files with 263 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
View File

@@ -1,16 +1,13 @@
// CSS adapted from
// https://github.com/alphagov/govuk_frontend_toolkit/blob/d9489a987086471fe30b4b925a81c12cd198c91d/docs/javascript.md#stick-at-top-when-scrolling
.js-stick-at-top-when-scrolling {
.js-stick-at-top-when-scrolling,
.js-stick-at-bottom-when-scrolling {
overflow: hidden;
margin-left: -$gutter-half;
margin-top: -10px;
margin-bottom: 5px;
padding: 10px 0 0 $gutter-half;
position: relative;
top: 5px;
transition: top 0.1s ease-out, box-shadow 1s ease-in-out;
.form-group {
margin-bottom: 20px;
@@ -32,17 +29,27 @@
}
.js-stick-at-top-when-scrolling {
margin-top: -10px;
margin-bottom: 5px;
top: 5px;
transition: top 0.1s ease-out, box-shadow 1s ease-in-out;
}
.js-stick-at-top-when-scrolling {
transition: bottom 0.1s ease-out, box-shadow 1s ease-in-out;
}
.content-fixed {
position: fixed;
top: 0;
background: $white;
z-index: 100;
margin-top: 0;
padding-right: $gutter-half;
border-bottom: 1px solid $border-colour;
box-shadow: 0 2px 0 0 rgba($border-colour, 0.2);
transition: background 0.6s ease-in-out, margin-top 0.4s ease-out;
.back-to-top-link {
opacity: 1;
@@ -51,6 +58,26 @@
}
.js-stick-at-top-when-scrolling.content-fixed {
top: 0;
margin-top: 0;
border-bottom: 1px solid $border-colour;
box-shadow: 0 2px 0 0 rgba($border-colour, 0.2);
transition: background 0.6s ease-in-out, margin-top 0.4s ease-out;
}
.js-stick-at-bottom-when-scrolling.content-fixed {
top: auto; // cancel `top: 0;` inherited from govuk-template
bottom: 0;
border-top: 1px solid $border-colour;
box-shadow: 0 -2px 0 0 rgba($border-colour, 0.2);
transition: background 0.6s ease-in-out;
}
.shim {
display: block;
margin-bottom: 5px;