Sticking a component when scrolling

The Sticky component is used to make another component stick to the top of the page once a user has scrolled past it. Hence, the sticky component requires a target component to keep it in the viewport on scroll.

In this recipe, we will demonstrate the usage of the p:sticky tag.

How to do it…

We would like to stick a select menu with a label as shown in this screenshot:

The select menu and the label are placed within h:panelGrid, which acts as the target component:

<h:panelGrid id="langGrid" columns="2"
  style="box-shadow: none;">
  <p:outputLabel for="lang" value="Language: "/>
  <p:selectOneMenu id="lang">
    <f:selectItem itemLabel="English" itemValue="en"/>
    <f:selectItem itemLabel="German" itemValue="de"/>
    <f:selectItem itemLabel="French" itemValue="fr"/>
  </p:selectOneMenu>
...