O'Reilly logo

PrimeFaces Beginner's Guide by K. Siva Prasad Reddy

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Introducing the Sticky component

Sticky component can be used to make other components stick within the viewport while scrolling. For example, we may want to stick the top header and navigation menu bar section of the web page while scrolling.

Let us see how we can make the header and menu bar sticky with a <p:sticky> component using the following code:

<h:body>       
  <div class="wrapper">
  <p:panel id="headerSection"> <p:panel id="header" style="height: 80px; margin-bottom: 2px;"> <h1>TechBuzz</h1> </p:panel> <h:form id="mainMenuForm"> <p:menubar> <p:menuitem value="Home" url="home.jsf"/> <p:menuitem value="New Post" url="createPost.jsf"/> <p:menuitem value="Search" url="search.jsf"/> <p:menuitem value="My Account" url="userAccount.jsf"/><p:menuitem value="Administration" ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required