Jump to content

The Alpha Bug Tracker is now closed.

πŸ‘‰ Please post any new bugs to the Invision Community v5 bug tracker.

  • 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!

User Feedback

Recommended Comments

Guest
Add a comment...