Creating "sticky" divs in the page body

[60980756]

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? 

[DrNufer]

I've been trying to tinker with this as well.  From what I understand is that the content with housed in Canvas within a flexbox as a parent and the sticky <div> needs siblings to interact with.  I don't understand why other <div>s wouldn't count as siblings.  I was able to get a sticky element to almost kind of come close to working, but I don't know why the page is acting the way it is.  I put my code on this page in case you'd like to grab it an tinker with it.

https://tcsedsystem.instructure.com/courses/99483/pages/sticky

[60980756 · Accepted solution]

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. 

[ddessauer]

💡That's cool!  Thanks for sharing. 

I don't actually know how this will turn out to be useful for me, but I successfully replicated the behaviour with your instruction and I keep a storage space just for this kind of thing. I'm sure it will come in handy eventually, so I've added it to my library of styles & tricks.

[DrNufer]

If you're interested in reviewing my library of tips and tricks, I blog a few of them:

https://www.howtocanvas.com/ 

[DrNufer]

I'm finding this almost works for me, but I'm coming across a glitch.  What I'm seeing is that the header is sticky for the length of the viewport height, but if there is text below that then it's no longer sticky.  Here's a quick video to show:

https://screenpal.com/watch/c0Qq0uVCm1o

That solution though is closer than anything I was able to come up with.