Book Image

PrimeFaces Cookbook

Book Image

PrimeFaces Cookbook

Overview of this book

Table of Contents (20 chapters)
PrimeFaces Cookbook Second Edition
Credits
Foreword
Foreword
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

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>
</h:panelGrid>

...

<p:sticky target="langGrid"/>

How it works…

The component to be sticked is referenced via the target...