mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-08 18:33:12 -04:00
deaa253e65
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
85 lines
1.6 KiB
SCSS
85 lines
1.6 KiB
SCSS
// 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-bottom-when-scrolling {
|
|
|
|
overflow: hidden;
|
|
margin-left: -$gutter-half;
|
|
padding: 10px 0 0 $gutter-half;
|
|
position: relative;
|
|
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.back-to-top-link {
|
|
|
|
position: absolute;
|
|
top: $gutter;
|
|
right: $gutter-half;
|
|
opacity: 0;
|
|
transition: opacity 0.1s ease-in-out;
|
|
|
|
@include ie-lte(8) {
|
|
display: none;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.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;
|
|
background: $white;
|
|
z-index: 100;
|
|
padding-right: $gutter-half;
|
|
|
|
.back-to-top-link {
|
|
opacity: 1;
|
|
transition: opacity 0.6s ease-in-out;
|
|
}
|
|
|
|
}
|
|
|
|
.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;
|
|
}
|