Introducing the Sticky component_PrimeFaces Beginner's Guide-QQ阅读男生轻小说网

上QQ阅读APP看书，第一时间看更新

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="margin-bottom: 3px; min-height: 500px;">
    <ui:insert name="bodyContent"/> 
  </p:panel>
  </div>
  <p:sticky target="headerSection" margin="3"/>
</h:body>

Here we have specified the header section panel with the component ID headerSection as the target of the <p:sticky> component. So, when you scroll through the web page, the headerSection panel content will stick at the top of the page. Also, we have specified the margin in pixels for the Sticky component via the margin attribute.

Tip

The DataTable component has out-of-the-box support for the Sticky header by setting the attribute stickyHeader="true".

本周热推：

Mastering Bootstrap 4（Second Edition）BPEL and Java Cookbook Mastering AWS CloudFormation VMware vSphere 5.1 Cookbook Azure DevOps Server 2019 Cookbook（Second Edition）