Use CSS sticky on HTML publications instead of custom script #2493
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- we've got a custom script on publications like /government/publications/heatwave-plan-for-england/beat-the-heat-staying-safe-in-hot-weather that keeps the contents list in the sidebar on the right as the page is scrolled - this script has a bug that lets the contents overlap the content at the bottom of the page in some situations - and we don't need the complexity of the JS now that CSS can do this natively - this isn't supported in Internet Explorer, but it fails gracefully
andysellick
force-pushed
the
use-css-sticky
branch
from
9263ae6 to
a75dc0b
Compare
- separate out the sidebar-with-body class from the grid row elements, so that the contents link at the bottom of the page is inside it and the margin bottom of sidebar-with-body comes beneath the contents link, not above it
- was 'contents' because it linked to the contents - however now the contents are sticky, can have this link and the contents on the same page, so 'Back to top' seems more appropriate - would remove altogether execept sticky isn't supported in IE so probably still useful to IE users
andysellick
force-pushed
the
use-css-sticky
branch
from
a75dc0b to
8ce0d0f
Compare
- if the height of the contents list exceeds the height of the viewport users can't see the whole contents unless they scroll to the bottom of the page, where the sticky element hits the bottom and stops - to fix this, we apply a max height of the viewport and an overflow y scroll, so that the element never exceeds the height of the viewport and can be scrolled - also adding a bottom margin to prevent collision with the back to top link at the bottom
|
@andysellick - does this fix #2056 as well? |
@DilwoarH yes, I believe so. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What
Stop using
sticky-element-container.json HTML publication pages and instead use native CSS sticky.The page layout has a contents list in the left hand column and the main content in the right. The script was used to keep a jump link to the contents (and a print this page button) visible at all times when scrolling, so users can jump back to the top at any time.
This change switches from using the script to the native CSS position: sticky attribute. It has been applied to the contents list, so now the entire contents list is visible in the left column when the page is scrolled. It also stops in the right position automatically when reaching the bottom.
Internet Explorer doesn't support the CSS sticky property, so this doesn't work in that browser. It fails gracefully though, in that nothing bad happens.
Behaviour on mobile remains the same - contents stack at top, link at bottom jumps back to top, no sticky.
Why
sticky-element-container.jsisn't perfect - it has a bug under certain conditions that makes the sticky element overlap the footer. It's also very complicated, and something we'd like to retire, but it's used on another page still so it's still needed.I've kept the 'Contents' jump link at the foot of the page but renamed it to 'Back to top', as that is more of an accurate description. However now that the whole contents menu scrolls with the page it's possible that we don't need this link at all (except possibly for Internet Explorer users).
Visual changes