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" url="admin.jsf"/>
     </p:menubar>
  </h:form>
  </p:panel>
  <p:panel style...