- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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.