Jump to content

The Alpha Bug Tracker is now closed.

👉 Please post any new bugs to the Invision Community v5 bug tracker.

Sticky Offset CSS No Longer Working

Dreadknux

By Dreadknux

  • Status: Not a bug

As of Alpha 12. Ehren shared the following code in order to allow any main-content elements to adjust their positions to the size of my sticky headers:

:root{
	--i-scroll-padding: calc(var(--i-headerPrimary--he) + 10px);
	--i-sticky-offset: calc(var(--i-headerPrimary--he) + 10px);
	}

But this seems to no longer work in the latest version. Has the CSS logic changed? In inspector, I can see some new variables:

--i-sticky-offset--large: 0px;
--i-sticky-offset--small: 0px;
--i-sticky-offset: calc(var(--i-sticky-offset--large) + var(--i-sticky-offset--extra, 0px));

The first two seem new, not sure what the difference between those are, and the third doesn’t seem to be listening to my override CSS code at the top there.

Any ideas?

    •
    Go to bugs

    User Feedback

    Recommended Comments

    Ehren Enthusiast

    Ehren

    Administrators
    comment_298

    This was changed a few weeks back. The old code required media queries for desktop and mobile offsets.

    The new code uses the large and small variables for large and small screens respectively. So now you can handle both in a single :root{} selector.

    This code should make the offset 100px on desktop and 50px on mobile:

    :root{
	--i-sticky-offset--large: 100px;
	--i-sticky-offset--small: 50px;
}

    The --i-sticky-offset variable should never be changed, since that calculates the values for mobile and desktop (it’s defined later in a @media query for mobiles).

    Defining the --i-scroll-padding variable like that is no longer necessary. It still exists in the code, but its purpose now is to add extra scroll-padding if necessary. If left undefined, the scroll-padding value is equal to the height of your offset variables (so it’s basically automatic).

  • Quote
    • Like 1
    • Thanks 1
    Guest
    Add a comment...