MobileRead Forums - View Single Post - Can I have a fixed position element that stays in place on every 'page'?

cow · 05-08-2022, 03:49 PM

I have a glossary at the end of my book. The TOC is enormous and it's a hassle to use that to jump to the glossary.

I'd like to have a floating SVG icon link that stays fixed in place in the top-right corner, to quickly jump down to the glossary no matter where I'm reading.

When I try to add an element with fixed positioning, it renders properly in sigil and stays put when I scroll (as it should), but on my reader (kobo sage), the fixed floating button only renders on the first "page" of the document.

Code:

.float-button {
  position: fixed;
  top: 0.5em;
  right: 0.5em;
  padding: 0.25em;
  z-index: 100;
}

Is this kind of thing typically problematic on e-readers?

And a secondary question..

I'd also like to have a "back" button on the glossary page, so that I can jump back to wherever I left off if I tapped the glossary button. Is there a "best practice" for this, or something that should be avoided?

05-08-2022, 03:49 PM	#1
cow Just a Cow Posts: 11 Karma: 10 Join Date: Mar 2022 Location: Pasture Device: Kobo Sage	Can I have a fixed position element that stays in place on every 'page'? I have a glossary at the end of my book. The TOC is enormous and it's a hassle to use that to jump to the glossary. I'd like to have a floating SVG icon link that stays fixed in place in the top-right corner, to quickly jump down to the glossary no matter where I'm reading. When I try to add an element with fixed positioning, it renders properly in sigil and stays put when I scroll (as it should), but on my reader (kobo sage), the fixed floating button only renders on the first "page" of the document. Code: .float-button { position: fixed; top: 0.5em; right: 0.5em; padding: 0.25em; z-index: 100; } Is this kind of thing typically problematic on e-readers? And a secondary question.. I'd also like to have a "back" button on the glossary page, so that I can jump back to wherever I left off if I tapped the glossary button. Is there a "best practice" for this, or something that should be avoided?