nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Is there a "Floating" Header?

jshaw

Hi, is there a way to have a heading float, so as the user scrolls down the header moves with them?
 
We don't use pagination very much, preferring to let the user swipe to reveal more rows in a table. But then the header quickly disappears, so a way to have it float down would be very useful.

Find more posts tagged with

Comments

jfranken

Hi jshaw,
 
Check out this post:
 
<a data-ipb='nomediaparse' href='http://developer.actuate.com/community/forum/index.php?/topic/34744-how-to-keep-headers-visible-when-scrolling/'>http://developer.actuate.com/community/forum/index.php?/topic/34744-how-to-keep-headers-visible-when-scrolling/</a>

jshaw

Thanks for the suggestion, it doesn't do what i would ideally like though. E.g. on the Mac if i scroll down the header disappears off the top, i'd like it to stick around. But maybe that's a bit complicated.

jfranken

Is the output for the web? If so, you can write JavaScript and JQuery code in the ClientScripts event. It will allow you to manipulate the CSS on the fly thus changing the layout whenever a DOM event triggers. I don't have any examples handy. If I have time later, I'll create a simple example.