Hello,
I try to build just to waypoint.
But it does not work! What am I doing wrong?
Here is the code.
Code: Select all
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Simple JSF Facelets page</title>
</h:head>
<h:body>
<h:panelGroup id="wrapper" layout="block">
<h1>Sticky Menubar and "Back to top" Link</h1>
<h:panelGroup id="main-nav-holder" layout="block">
<p:menubar id="menubar">
<p:menuitem value="File" url="#" icon="ui-icon-document"/>
<p:menuitem value="New" url="#" icon="ui-icon-contact"/>
</p:menubar>
</h:panelGroup>
<h:panelGroup id="container" layout="block">
<div>
<h1>Lorem Ipsum Dolor</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
</p>
</div>
.....
</h:panelGroup>
</h:panelGroup>
<pe:waypoint id="waypoint2" for="main-nav-holder">
<pe:javascript event="reached" execute="$(ext.waypoint).toggleClass('sticky', ext.direction === 'down');"/>
</pe:waypoint>
<h:outputStylesheet id="waypointCSS">
#wrapper {
width: 560px;
margin: 0 auto;
}
#menubar {
width: 560px;
}
.sticky #menubar {
position: fixed;
top: 0;
}
#container {
margin-bottom: 20px;
}
.top {
position: fixed;
right: 20px;
bottom: 20px;
font-size: 14px;
box-shadow: 0 0 15px 1px #808080;
}
.top.hidden {
display: none;
}
</h:outputStylesheet>
</h:body>
</html>
Cheers!