Sticky

Sticky component positions the target component as fixed so that the component stays in window viewport during scrolling. Scroll down to see the sticky toolbar.

Documentation
<style type="text/css">
    .ui-sticky {
        top: 70px !important;
    }
    @media (max-width: 960px) {
        .ui-sticky {
            top: 110px !important;
        }
    }
</style>


<p:toolbar id="tb">
    <f:facet name="left">
        <p:commandButton type="button" value="New" icon="pi pi-file" />
        <p:commandButton type="button" value="Open" icon="pi pi-folder-open"/>
    </f:facet>
    <f:facet name="right">
        <p:commandButton type="button" title="Save" icon="pi pi-save"/>
        <p:commandButton type="button" title="Delete" icon="pi pi-trash"/>
        <p:commandButton type="button" title="Print" icon="pi pi-print"/>
    </f:facet>
</p:toolbar>

<div style="height:800px"></div>

<p:sticky target="tb" />

FREE THEMES

Built-in component themes created by the PrimeFaces Theme Designer.

nova-light Nova-Light
nova-dark Nova-Dark
nova-colored Nova-Colored
luna-blue Luna-Blue
luna-amber Luna-Amber
luna-green Luna-Green
luna-pink Luna-Pink
omega Omega

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.