Creating "sticky" divs in the page body

Jump to solution
Community Participant

In html styles in general, "position:sticky" (combined with other formatting) enables a div to remain visible even as the user scrolls down. (For an example of this in the Canvas UI, see the behavior of the left-hand navigation menu as you scroll down a long page.)

Using the style within the body of the Canvas page seems to have no effect, though the RCE doesn't strip it out the way it does with "forbidden" styles. I've tried applying some of the classes I found in the CSS to my divs (e.g. "ic-sticky-frame" and "sticky-toolbar") with no luck. 

Has anyone had any luck using either inline styles or existing Canvas classes to make a div "stick" to the top of the user screen, even as they scroll down the page? 

1 Solution
Community Participant

I think I figured out the issue! Apparently to use "position: sticky;" the parent div needs to have a defined height. In the body of a Canvas page, the height is whatever it needs to be for the content. So I have wrapped the content of my entire page in this:

<div style="height: calc(100vh - 340px);">

It defined the height of the Canvas body as being the height of the "viewscreen" (the total browser window space) minus a fixed set of pixels that accounts for the upper toolbars/menu/title, and in my case, the "Next "and "previous" buttons at the bottom. If your instance of Canvas has a different overall frame, you might need to adjust that pixel value until the far-right hand scroll bar goes away, and is effectively replaced by a scroll bar in the window you've just created. Then you can give your "sticky" div the following properties: 

<div style="position:sticky; top:0;">

My use case was that I had a module home page with a module navigation menu and a lot of descriptive text. I made a column with the descriptive text and another column with the sticky menu. 

View solution in original post