- Status: Fixed
Thanks to some kind help from Ehren, I was able to get part of my desktop header working as a sticky-scroll element, which is useful (at least on desktop) for quick-access to community suite menus etc. Almost all elements that work with sticky functions adjust themselves well to my custom CSS, with one exception - the post editor toolbar.
Video proof below - I remove the sticky header to show that the toolbar IS working as a sticky scroll element, itβs just clearly hidden behind the sticky header as the user scrolls down.
Itβs the same on mobile too (I currently have a sticky mobile header bar on my alpha instance, but Iβm considering not keeping itβ¦).
If it helps, my custom CSS code (relative to this) is as follows:
:root{
--i-scroll-padding: calc(var(--i-headerPrimary--he) + 10px);
--i-sticky-offset: calc(var(--i-headerPrimary--he) + 10px);
}
/* Sticky Header */
@media screen and (min-height: 850px) {
.ipsHeader {
display: contents;
}
.ipsHeader__primary {
position: sticky;
top: 0;
z-index: var(--i-z-index_headerPrimary);
}
}
/* Mobile Sticky Header */
.ipsMobileHeader {
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 7;
}
Is this something worth fixing, or is there a CSS function Iβm missing that I can include to account for things like the post editor toolbar? :) Thank you!
Recommended Comments