How would one go about creating sticky scrolling headers with Panel. Upon using Inspect Element on a panel app built on VanillaTemplate, I noticed that for the nav with id=header there was no position: fixed style that was applied, nor did I find anything in the browser’s javasript.
Trying to add a HTML div or a pn.Row element with position: sticky in the styles attribute doesn’t seem to have an effect either. Has anyone managed to deal with this (think section headers while scrolling)?
I think you are referring to both the Header of a template at the top of an app. And then the header of a section/ an area of an app. The app header is already sticky in the sense that its shown at the top always.
For components I think what you are looking for is the scroll parameter of a Column.
import panel as pn
pn.extension()
lines = list(str(item) for item in range(0,50))
section_header = "## This is a sticky section header"
section_text_content = pn.pane.Markdown("\n".join(lines), sizing_mode="stretch_both")
section_text = pn.Column(section_text_content, scroll=True)
section = pn.Column(section_header, section_text, height=300)
pn.template.FastListTemplate(
title="My App", main=[section, "# Another section"]
).servable()
@Marc this is indeed kind of what I am looking for, but not exactly. Is there a mechanism built into panel that allows that section header to become fixed OVER the header upon scroll (such that the section header becomes the new header). And if not, would the recommended solution be to use Javascript to change header contents upon scrolling past different sections of the page?
