Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Freezing the top of a sheet

Is it possible to freeze the top section of a character sheet so that it's always visible no matter how much you scroll down? Things like page tabs and character stats.
1607887722
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
If you're making a custom sheet, yes. You can use position sticky to do it
Thanks, yes that seems to be just the thing I'm after! Unfortunately I can't seem to get it to work. Here's what I've got: <div class="sticky"> HEADER TO ALWAYS APPEAR AT THE TOP REGARDLESS OF PAGE SELECTION AND SCROLLING </div> <div>     <button type="action" name="act_character" style="color:#404040;" >Character</button>     <button type="action" name="act_moves" style="color:#404040;" >Moves</button>     <button type="action" name="act_list" style="color:#404040;" >List</button> </div> <input type='hidden' class='sheet-tabstoggle' name='attr_sheetTab'  value='character'  /> <div class='sheet-character'>     <span> CHARACTER PAGE BODY </span> </div> <div class='sheet-character'>     <span> MOVES PAGE BODY </span> </div> <div class='sheet-character'>     <span> LIST PAGE BODY </span> </div> <script type="text/worker">     const buttonlist = ["character","moves","list"];     buttonlist.forEach(button => {         on(`clicked:${button}`, function() {             setAttrs({                 sheetTab: button             });         });     }); </script> CSS: div.sticky {   position: sticky;   top: 0;   padding: 50px;   font-size: 40px; } Can anyone see where I've gone wrong? (It may well be obvious - I'm quite the html-noob!)
1607966252

Edited 1607966509
vÍnce
Pro
Sheet Author
What part isn't working Rich?  One thing I see, although roll20 will insert "sheet-" in your html when loaded in the vtt,  you'll need to include ".sheet-" to any class names in your css.  You also might want to add a background-color to .sheet-sticky as well so that any scrolling isn't seen through your sticky div. div.sheet-sticky { position: sticky; top: 0; padding: 50px; font-size: 40px; background-color: grey; } FYI: Never rely on the preview tab to be accurate.  Always verify in a test game.
1607973098

Edited 1607973177
Andreas J.
Forum Champion
Sheet Author
Translator
Vince mentioned Number 2 and Number 4 from <a href="https://wiki.roll20.net/Building_Character_Sheets#Common_Mistakes" rel="nofollow">https://wiki.roll20.net/Building_Character_Sheets#Common_Mistakes</a> If you're a complete HTML noob, it's best you on the regular consult that page so you know you do things the Roll20 way, as there are some differences to how html/css/JS works in general.
Thanks Vince, yes that was exactly my mistake. Knew it would be a basic one! And thanks Andreas, that's good advice.
Next hurdle - I've got a weird quirk happening whereby when I scroll past repeating sections they pass on top of the stickied section (rather than seeming to pass underneath). What could be causing this?
1607988733
Andreas J.
Forum Champion
Sheet Author
Translator
Repeating sections are weird. Could try to add some z-index to the css of sections and force the repeating sections have a lower number than the top section, but no idea if that might work.