darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-09 09:49:48 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
68a1426e58475965a052d511c61e4ca2230b0e17
notifications-admin/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss

36 lines
800 B
SCSS
Raw Normal View History

Make send yourself a test form stay at top of page You might need to scroll this page quite a lot to see where a placeholder appears in your template – especially if you have a long email or letter. One of the things I’m trying to stop happening so much is a lot of scrolling back and forth. This would happen if you were scrolling down to see the placeholder, then back up to fill in its value. So this commit makes the textbox ‘sticky’, ie it always stays at the top of the viewport, even when you scroll down. This lets you see the placeholder and the textbox side by side, no matter how long the template is. The code to do this mostly comes from the GOV.UK Frontend Toolkit (documented here: https://github.com/alphagov/govuk_frontend_toolkit/blob/d9489a987086471fe30b4b925a81c12cd198c91d/docs/javascript.md#stick-at-top-when-scrolling). I had to add some extra CSS to make it look good when it overlaps the content of the page, which the GOV.UK Frontend Toolkit implementation doesn’t really anticipate.
2017-05-16 16:56:40 +01:00
// 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 {
overflow: hidden;
margin-left: -$gutter-half;
Stop fixed position elements flying about Normally, fixed position elements are positioned at `top: 0`. The code that stops them from overlapping the footer does so by: - setting the position to absolulte - setting `top` to a calculated value (eg `1500px`) which makes it sit above the footer The problem is caused because we’re animating `top`, so when scrolling back up the page elements are getting animated from `1500px` to `0px`, ie flying up from the bottom of the screen.
2017-06-15 11:47:32 +01:00
margin-top: -10px;
Ease fixed-position elements into place The transition between something being static in the page and fixed to the top of the viewport is a bit jarring. This commit adds a bit of animation so that, as elements become fixed, they appear to catch up with the scrolling of the page.
2017-06-15 07:52:36 +01:00
margin-bottom: 5px;
Make send yourself a test form stay at top of page You might need to scroll this page quite a lot to see where a placeholder appears in your template – especially if you have a long email or letter. One of the things I’m trying to stop happening so much is a lot of scrolling back and forth. This would happen if you were scrolling down to see the placeholder, then back up to fill in its value. So this commit makes the textbox ‘sticky’, ie it always stays at the top of the viewport, even when you scroll down. This lets you see the placeholder and the textbox side by side, no matter how long the template is. The code to do this mostly comes from the GOV.UK Frontend Toolkit (documented here: https://github.com/alphagov/govuk_frontend_toolkit/blob/d9489a987086471fe30b4b925a81c12cd198c91d/docs/javascript.md#stick-at-top-when-scrolling). I had to add some extra CSS to make it look good when it overlaps the content of the page, which the GOV.UK Frontend Toolkit implementation doesn’t really anticipate.
2017-05-16 16:56:40 +01:00
padding: 10px 0 0 $gutter-half;
Ease fixed-position elements into place The transition between something being static in the page and fixed to the top of the viewport is a bit jarring. This commit adds a bit of animation so that, as elements become fixed, they appear to catch up with the scrolling of the page.
2017-06-15 07:52:36 +01:00
position: relative;
Stop fixed position elements flying about Normally, fixed position elements are positioned at `top: 0`. The code that stops them from overlapping the footer does so by: - setting the position to absolulte - setting `top` to a calculated value (eg `1500px`) which makes it sit above the footer The problem is caused because we’re animating `top`, so when scrolling back up the page elements are getting animated from `1500px` to `0px`, ie flying up from the bottom of the screen.
2017-06-15 11:47:32 +01:00
top: 5px;
Ease fixed-position elements into place The transition between something being static in the page and fixed to the top of the viewport is a bit jarring. This commit adds a bit of animation so that, as elements become fixed, they appear to catch up with the scrolling of the page.
2017-06-15 07:52:36 +01:00
transition: top 0.1s ease-out, box-shadow 1s ease-in-out;
Make send yourself a test form stay at top of page You might need to scroll this page quite a lot to see where a placeholder appears in your template – especially if you have a long email or letter. One of the things I’m trying to stop happening so much is a lot of scrolling back and forth. This would happen if you were scrolling down to see the placeholder, then back up to fill in its value. So this commit makes the textbox ‘sticky’, ie it always stays at the top of the viewport, even when you scroll down. This lets you see the placeholder and the textbox side by side, no matter how long the template is. The code to do this mostly comes from the GOV.UK Frontend Toolkit (documented here: https://github.com/alphagov/govuk_frontend_toolkit/blob/d9489a987086471fe30b4b925a81c12cd198c91d/docs/javascript.md#stick-at-top-when-scrolling). I had to add some extra CSS to make it look good when it overlaps the content of the page, which the GOV.UK Frontend Toolkit implementation doesn’t really anticipate.
2017-05-16 16:56:40 +01:00
.form-group {
margin-bottom: 20px;
}
}
.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);
Stop fixed position elements flying about Normally, fixed position elements are positioned at `top: 0`. The code that stops them from overlapping the footer does so by: - setting the position to absolulte - setting `top` to a calculated value (eg `1500px`) which makes it sit above the footer The problem is caused because we’re animating `top`, so when scrolling back up the page elements are getting animated from `1500px` to `0px`, ie flying up from the bottom of the screen.
2017-06-15 11:47:32 +01:00
transition: background 0.6s ease-in-out, margin-top 0.4s ease-out;
Make send yourself a test form stay at top of page You might need to scroll this page quite a lot to see where a placeholder appears in your template – especially if you have a long email or letter. One of the things I’m trying to stop happening so much is a lot of scrolling back and forth. This would happen if you were scrolling down to see the placeholder, then back up to fill in its value. So this commit makes the textbox ‘sticky’, ie it always stays at the top of the viewport, even when you scroll down. This lets you see the placeholder and the textbox side by side, no matter how long the template is. The code to do this mostly comes from the GOV.UK Frontend Toolkit (documented here: https://github.com/alphagov/govuk_frontend_toolkit/blob/d9489a987086471fe30b4b925a81c12cd198c91d/docs/javascript.md#stick-at-top-when-scrolling). I had to add some extra CSS to make it look good when it overlaps the content of the page, which the GOV.UK Frontend Toolkit implementation doesn’t really anticipate.
2017-05-16 16:56:40 +01:00
}
.shim {
display: block;
}
Reference in New Issue Copy Permalink